/* Machen mit Herz — Ergänzungs-CSS für Dinge, die Block-Einstellungen allein nicht abdecken.
   Farben/Schrift/Abstände selbst kommen aus theme.json und sind dort (bzw. im Editor) änderbar. */

html {
	scroll-behavior: smooth;
}

/* -------------------------------------------------- */
/* Aufklappbare Inhalte (Antragsformular, Spenden-Info) */
/* -------------------------------------------------- */
.mmh-reveal {
	display: none;
}
.mmh-reveal.is-open {
	display: block;
	animation: mmh-rise 0.4s ease-out both;
}

/* -------------------------------------------------- */
/* Sticky Header                                       */
/* -------------------------------------------------- */
.mmh-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	/* Bewusst kein backdrop-filter hier: das würde für alle position:fixed-Kindelemente
	   (u.a. das mobile mit Navigations-Overlay) einen neuen Containing Block erzeugen und
	   sie auf die 56px-hohe Header-Box einsperren statt den ganzen Bildschirm zu füllen. */
	background-color: rgba(253, 250, 243, 0.97);
}

/* -------------------------------------------------- */
/* Mobiles Navigations-Overlay: links ausrichten statt   */
/* rechtsbündig über den Bildschirmrand hinauszulaufen   */
/* -------------------------------------------------- */
.wp-block-navigation__responsive-container.is-menu-open {
	width: 100vw !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start !important;
	width: 100%;
}

/* -------------------------------------------------- */
/* Eyebrow-Pills (kleine farbige Label über Überschriften) */
/* Als Absatz-Block-Stil "Eyebrow-Pill" im Editor auswählbar (Stile-Panel). */
/* -------------------------------------------------- */
.mmh-eyebrow,
.is-style-mmh-eyebrow {
	display: inline-block;
	font-size: 13px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 0;
}

/* -------------------------------------------------- */
/* Buttons mit Schlagschatten-Kante (wie im Design)     */
/* Als Button-Block-Stil "Schatten Grün/Rot" im Editor auswählbar. */
/* -------------------------------------------------- */
.mmh-btn-shadow .wp-block-button__link,
.is-style-mmh-shadow-green .wp-block-button__link {
	box-shadow: 0 4px 0 var(--wp--preset--color--green-shadow);
}
.mmh-btn-shadow-red .wp-block-button__link,
.is-style-mmh-shadow-red .wp-block-button__link {
	box-shadow: 0 4px 0 var(--wp--preset--color--red-shadow);
}

/* -------------------------------------------------- */
/* Porträt-Rahmen (versetzte Farbfläche hinter dem Bild) */
/* Als Bild-Block-Stil "Porträt-Rahmen" im Editor auswählbar. */
/* -------------------------------------------------- */
.mmh-portrait-frame img,
.is-style-mmh-portrait-frame img {
	box-shadow: 14px 14px 0 var(--wp--preset--color--lawn);
	border-radius: 14px;
}

/* -------------------------------------------------- */
/* Herzschlag-Icon                                      */
/* -------------------------------------------------- */
.mmh-heartbeat.mmh-heartbeat {
	/* Klasse doppelt im Selektor: erhöht die Feingewichtung bewusst, damit z. B. die
	   Hero-Einblend-Animation (".mmh-rise-in > *") diese Regel nicht überschreibt,
	   wenn ein Herz-Icon direktes Kind des Hero-Containers ist. */
	animation: mmh-beat 3.6s ease-in-out infinite;
	display: inline-block;
}

/* Dekorative, pulsierende Herzen im Hero-Hintergrund */
.mmh-deco-heart {
	pointer-events: none;
	z-index: 0;
	line-height: 1;
}
@media (max-width: 781px) {
	.mmh-deco-heart {
		display: none;
	}
}

/* -------------------------------------------------- */
/* Einstiegs-Animationen für den Hero-Bereich           */
/* -------------------------------------------------- */
.mmh-rise-in > * {
	animation: mmh-rise 0.7s ease-out both;
}
.mmh-rise-in > *:nth-child(1) { animation-delay: 0.05s; }
.mmh-rise-in > *:nth-child(2) { animation-delay: 0.2s; }
.mmh-rise-in > *:nth-child(3) { animation-delay: 0.35s; }
.mmh-rise-in > *:nth-child(4) { animation-delay: 0.5s; }

@keyframes mmh-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes mmh-beat {
	0%, 100% { transform: scale(1); }
	12% { transform: scale(1.14); }
	24% { transform: scale(1); }
	36% { transform: scale(1.08); }
	50% { transform: scale(1); }
}
@keyframes mmh-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes mmh-modal-in {
	from { opacity: 0; transform: translateY(18px) scale(0.97); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.mmh-rise-in > *,
	.mmh-heartbeat,
	.mmh-popup,
	.mmh-popup__box {
		animation: none !important;
	}
}

/* -------------------------------------------------- */
/* Anmelde-Popup (öffnet sich kurz nach dem Laden)      */
/* -------------------------------------------------- */
.mmh-popup {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(42, 38, 33, 0.8);
}
.mmh-popup.is-visible {
	display: flex;
	animation: mmh-fade 0.3s ease-out both;
}
.mmh-popup__box {
	background: #fff;
	border-radius: 18px;
	max-width: 620px;
	width: 100%;
	max-height: 88vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.2);
	animation: mmh-modal-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.mmh-popup__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.85);
	color: var(--wp--preset--color--ink);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}
.mmh-popup__close:hover {
	background: #fff;
	color: var(--wp--preset--color--red);
}

/* -------------------------------------------------- */
/* Bildunterschriften-Karten (Projekt-Bereich)          */
/* Als Cover-Block-Stil "Bildunterschrift-Karte" im Editor auswählbar. */
/* -------------------------------------------------- */
.mmh-caption-card,
.is-style-mmh-caption-card {
	aspect-ratio: 1 / 1;
	border-radius: 12px;
}
.mmh-caption-card .wp-block-cover__inner-container,
.is-style-mmh-caption-card .wp-block-cover__inner-container {
	width: 100%;
}
.mmh-caption-card figcaption,
.mmh-caption-card .wp-block-cover__inner-container > p,
.is-style-mmh-caption-card figcaption,
.is-style-mmh-caption-card .wp-block-cover__inner-container > p {
	font-size: 14px;
	font-weight: 700;
	margin: 0;
}

/* -------------------------------------------------- */
/* Details-Block als Akkordeon (FAQ + Projekt-Themen)   */
/* -------------------------------------------------- */
.wp-block-details > summary {
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.wp-block-details > summary::-webkit-details-marker {
	display: none;
}
.wp-block-details > summary::marker {
	content: "";
}
.wp-block-details > summary::after {
	content: "+";
	float: right;
	font-size: 20px;
	color: var(--wp--preset--color--green);
}
.wp-block-details[open] > summary::after {
	content: "–";
}

/* -------------------------------------------------- */
/* Kontakt-Link in der Hauptnavigation als Button        */
/* -------------------------------------------------- */
.mmh-nav-cta a {
	background: var(--wp--preset--color--green-deep);
	color: #fff !important;
	padding: 9px 18px !important;
	border-radius: 999px;
}
.mmh-nav-cta a:hover {
	background: var(--wp--preset--color--green);
	color: #fff !important;
}

/* -------------------------------------------------- */
/* Footer-Logo-Box                                       */
/* -------------------------------------------------- */
.wp-block-group.mmh-footer-logo-box {
	display: inline-flex !important;
	width: auto !important;
	flex-basis: auto !important;
}
.mmh-footer-logo-box img {
	display: block;
}

/* -------------------------------------------------- */
/* Contact Form 7 — an das Design angleichen            */
/* -------------------------------------------------- */
.wpcf7-form label {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-size: 15px;
	font-weight: 700;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 14px;
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
	padding: 12px 15px;
	border: 2px solid var(--wp--preset--color--border-soft);
	border-radius: 10px;
	background: #fffdf8;
	font-size: 16px;
	font-family: inherit;
	width: 100%;
	box-sizing: border-box;
}
.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 1px;
}
.wpcf7-form .wpcf7-radio,
.wpcf7-form .wpcf7-checkbox {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-weight: 400;
}
.wpcf7-form .wpcf7-list-item {
	margin: 0;
}
.wpcf7-form .wpcf7-quiz {
	width: 90px;
	text-align: center;
}
.wpcf7-form input[type="submit"] {
	margin-top: 8px;
	padding: 15px 34px;
	background: var(--wp--preset--color--green);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
}
.wpcf7-form input[type="submit"]:hover {
	background: var(--wp--preset--color--green-deep);
}
.mmh-form-red .wpcf7-form input[type="submit"] {
	background: var(--wp--preset--color--red);
}
.mmh-form-red .wpcf7-form input[type="submit"]:hover {
	background: var(--wp--preset--color--red-shadow);
}
.wpcf7-form .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--red);
	font-size: 13px;
	font-weight: 600;
	margin-top: 4px;
}
.wpcf7-form .wpcf7-response-output {
	border-radius: 10px;
	padding: 14px 18px;
	font-size: 15px;
}