/* ==========================================================================
   entspannt vegan – Website-CSS (Astra + Spectra)
   --------------------------------------------------------------------------
   Früher im Customizer („Zusätzliches CSS“), seit November 2026 hier im
   Child-Theme: versioniert, vom Browser cachebar, Änderungen über Staging.
   Wird an derselben Stelle wie das Customizer-CSS geladen (wp_head, 101),
   damit die Reihenfolge gegenüber Astra/Spectra gleich bleibt.
   --------------------------------------------------------------------------
   1. Design-Tokens
   2. Basis (Überschriften, Bilder, Listen)
   3. Header – Desktop-Navigation
   4. Header – Mega Menu
   5. Header – Mobile Navigation
   6. Footer
   7. Utilities
   8. Komponenten: Referenz-Grid, Zitat, Newsletter
   9. Hoch-/Tiefgestellt
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN-TOKENS
   -------------------------------------------------------------------------- */
:root {
	/* Farben */
	--ev-green: #708878;        /* Primär / Akzentgrün */
	--ev-green-hover: #607868;  /* Hover Menü-Button */
	--ev-green-dark: #5c7364;
	--ev-green-darker: #4b5f52;
	--ev-sage: #c4d1cc;
	--ev-sage-soft: #dfe7e3;
	--ev-rose: #c98f86;
	--ev-rose-soft: #f3dedb;
	--ev-cream: #f8f5f0;
	--ev-text: #3c3c3b;
	--ev-heading: #222;
	--ev-muted: #6b6866;
	--ev-border: #e3ddd9;

	/* Schriften */
	--ev-font-serif: Georgia, "Times New Roman", serif;
	--ev-font-script: "Segoe Script", "Snell Roundhand", "Bradley Hand", cursive;

	/* Radien */
	--ev-radius: 5px;
	--ev-radius-pill: 999px;
}


/* --------------------------------------------------------------------------
   2. BASIS
   -------------------------------------------------------------------------- */

/* Astra „Mehr laden“-Button während des Ladens ausblenden */
.ast-load-more.active {
	display: none !important;
}

/* Abstand nach Überschriften */
h1 { margin-bottom: 0.6em; }
h2, h3 { margin-bottom: 0.5em; }
h4, h5, h6 { margin-bottom: 0.4em; }

/* Bilder: abgerundete Ecken */
img {
	border-radius: var(--ev-radius);
}

/* Bildunterschriften ausblenden: WordPress übernimmt beim Hochladen teils
   Beschreibungen aus den Kameradaten (IPTC) als Unterschrift */
.wp-block-image figcaption {
	display: none !important;
}

/* Lange URLs in Listen dürfen umbrechen, normale Wörter nicht
   (anywhere würde auch mitten im Wort trennen) */
.entry-content li {
	overflow-wrap: break-word;
}


/* --------------------------------------------------------------------------
   3. HEADER – DESKTOP-NAVIGATION (ab 992px)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
	/* Menüpunkt als Button (CSS-Klasse „ent-button-menu“ im Menü setzen) */
	.main-header-menu .menu-item.ent-button-menu > .menu-link {
		margin: 0 1em;
		padding: 0.2em 1em;
		border-radius: var(--ev-radius);
		background-color: var(--ev-green);
		color: #fff !important;
		font-weight: 600;
		transition: background-color 0.3s ease, color 0.3s ease;
	}

	.main-header-menu .menu-item.ent-button-menu > .menu-link:hover {
		background-color: var(--ev-green-hover);
		color: #fff !important;
	}

	/* Deko-Elemente (z. B. Unterstreichung) entfernen */
	.main-header-menu .menu-item.ent-button-menu > .menu-link::before,
	.main-header-menu .menu-item.ent-button-menu > .menu-link::after {
		display: none !important;
	}
}


/* --------------------------------------------------------------------------
   4. HEADER – MEGA MENU
   -------------------------------------------------------------------------- */
.ast-desktop :is(.ast-above-header-menu, .ast-below-header-menu, .main-header-menu)
	.astra-megamenu-li .sub-menu .menu-item-heading .menu-text {
	vertical-align: sub;
}

@media (max-width: 544px) {
	.sub-menu .menu-item-heading .menu-text {
		vertical-align: sub;
	}
}


/* --------------------------------------------------------------------------
   5. HEADER – MOBILE NAVIGATION
   -------------------------------------------------------------------------- */

/* Overlay im Off-Canvas-Menü: transparent (war eine Elementor-Variable,
   die ohne Elementor leer war – im Ergebnis ebenfalls transparent) */
.ast-mobile-popup-overlay {
	opacity: 1 !important;
	background-color: transparent !important;
}

/* Schließen-Button */
#menu-toggle-close .ast-svg-iconset svg {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	height: 30px;
	padding: 4px;
	color: var(--ast-global-color-0);
	cursor: pointer;
}

/* Erstes Pfeil-Icon neben Menülinks ausblenden */
.ast-header-break-point .main-navigation ul .menu-item .menu-link .icon-arrow:first-of-type svg {
	visibility: hidden;
}

/* Menüpunkt & Dropdown-Toggle nebeneinander ausrichten */
.ast-header-break-point .main-navigation ul .menu-item-has-children {
	justify-content: space-between;
}

/* Dropdown-Toggle (Pfeil) */
.ast-header-break-point .main-navigation ul .menu-item-has-children > .ast-menu-toggle {
	display: inline;
	min-width: auto;
	min-height: auto;
	margin: -5px 0 0 0.3em;
	padding: 0 !important;
	border: none !important;
	outline: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	line-height: 1;
	cursor: pointer;
}

/* Tastatur-Fokus sichtbar halten (Barrierefreiheit) */
.ast-header-break-point .main-navigation ul .menu-item-has-children > .ast-menu-toggle:focus-visible {
	outline: 2px solid var(--ev-green) !important;
	outline-offset: 2px;
}

.ast-header-break-point .main-navigation ul .menu-item-has-children > .ast-menu-toggle .icon-arrow svg {
	width: 0.7em !important;
	border: 0;
	box-shadow: none !important;
}

/* Einzug dritte Ebene */
.ast-header-break-point .main-navigation ul .sub-menu .sub-menu > li > .menu-link {
	padding-left: 40px !important;
}


/* --------------------------------------------------------------------------
   6. FOOTER
   -------------------------------------------------------------------------- */
.site-footer a {
	color: #000 !important;
	text-decoration: none;
}

.site-footer a:is(:hover, :focus),
.site-footer .current-menu-item a {
	color: var(--ev-green) !important;
}


/* --------------------------------------------------------------------------
   7. UTILITIES
   -------------------------------------------------------------------------- */
.kategorie-box {
	background-color: #fff;
}

.no-underline a:is(*, :hover, :focus) {
	text-decoration: none;
}


/* --------------------------------------------------------------------------
   8a. KOMPONENTE: REFERENZ-GRID (.ev-referenz)
   Layout: Text | Bild (2 Spalten) | Bild | Text
   -------------------------------------------------------------------------- */
.ev-referenz {
	--ev-ref-gap: 16px;
	display: grid !important;
	grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
	gap: var(--ev-ref-gap);
	align-items: start;
}

.ev-referenz > * {
	max-width: none !important;
	margin: 0 !important;
}

.ev-referenz > :is(:nth-child(1), :nth-child(4)) {
	padding-right: 48px;
}

.ev-referenz > :is(:nth-child(2), :nth-child(3)) {
	align-self: end;
}

.ev-referenz > :nth-child(2) {
	grid-column: span 2;
	container-type: inline-size;
}

.ev-referenz img {
	display: block;
	width: 100% !important;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

/* Breites Bild: gleiche Höhe wie das 2:3-Hochformat daneben */
.ev-referenz > :nth-child(2) img {
	aspect-ratio: auto;
	height: calc((100cqw - var(--ev-ref-gap)) * 0.75) !important;
}

@media (max-width: 900px) {
	.ev-referenz {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ev-referenz > :is(:nth-child(1), :nth-child(4)) {
		grid-column: 1 / -1;
		padding-right: 0;
	}

	.ev-referenz > :nth-child(4) {
		margin-top: 24px !important;
	}
}


/* --------------------------------------------------------------------------
   8b. KOMPONENTE: ZITAT (Spectra Blockquote mit Klasse „zitat-responsive“)
   Tablet + Mobil zentriert (Spectra-Tablet-Breakpoint: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.wp-block-uagb-blockquote.zitat-responsive .uagb-blockquote,
	.wp-block-uagb-blockquote.zitat-responsive .uagb-blockquote
		:is(.uagb-blockquote__content, .uagb-blockquote__author) {
		text-align: center;
	}

	.wp-block-uagb-blockquote.zitat-responsive .uagb-blockquote .uagb-blockquote__author-wrap {
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.wp-block-uagb-blockquote.zitat-responsive .uagb-blockquote .uagb-blockquote__icon {
		display: block;
		float: none;
		margin-inline: auto;
		text-align: center;
	}
}


/* --------------------------------------------------------------------------
   8c. KOMPONENTE: NEWSLETTER „Sonntagspost“ (Above Footer, HTML 3)
   -------------------------------------------------------------------------- */
.ev-nl {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: clamp(20px, 3vw, 40px);
	border-radius: 28px;
	background: var(--ev-cream);
	color: var(--ev-text);
	text-align: left;
}

/* Deko-Fläche unten links */
.ev-nl::after {
	content: "";
	position: absolute;
	left: -8%;
	bottom: -90px;
	z-index: 0;
	width: 55%;
	height: 180px;
	border-radius: 50%;
	background: var(--ev-sage);
	opacity: 0.45;
}

.ev-nl > * {
	position: relative;
	z-index: 1;
}

/* Bild */
.ev-nl__media {
	position: relative;
	min-width: 0;
}

.ev-nl__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 34% 66% 40% 60% / 18% 24% 76% 82%;
	background: var(--ev-sage);
}

.ev-nl__note {
	position: absolute;
	top: 9%;
	left: 34%;
	margin: 0;
	font-family: var(--ev-font-script);
	font-size: clamp(15px, 1.5vw, 20px);
	line-height: 1.45;
	color: var(--ev-text);
	text-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
	transform: rotate(-6deg);
}

/* Text */
.ev-nl__eyebrow {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ev-muted);
}

.ev-nl__title {
	margin: 0 0 18px;
	font-family: var(--ev-font-serif);
	font-size: clamp(32px, 4.2vw, 56px);
	font-weight: 700;
	line-height: 1.08;
	color: var(--ev-heading);
}

.ev-nl__mark {
	background: linear-gradient(transparent 82%, var(--ev-sage) 82%);
}

.ev-nl__heart {
	color: var(--ev-rose);
}

.ev-nl__lead {
	margin: 0 0 28px;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.6;
}

/* Features */
.ev-nl__features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	text-align: center;
}

.ev-nl__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: var(--ev-sage-soft);
	color: var(--ev-green-dark);
}

.ev-nl__icon--rose {
	background: var(--ev-rose-soft);
	color: var(--ev-rose);
}

.ev-nl__icon svg {
	width: 34px;
	height: 34px;
}

.ev-nl__features h3 {
	margin: 0 0 6px;
	font-family: var(--ev-font-serif);
	font-size: 17px;
	line-height: 1.3;
	color: var(--ev-heading);
}

.ev-nl__features p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ev-muted);
}

.ev-nl__script {
	margin: 0 0 18px;
	font-family: var(--ev-font-script);
	font-size: clamp(18px, 1.8vw, 24px);
	color: var(--ev-green-dark);
	text-align: center;
}

/* Formular */
.ev-nl__form {
	display: flex;
	gap: 12px;
	margin: 0;
}

.ev-nl__field {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px;
	border: 1px solid var(--ev-border);
	border-radius: var(--ev-radius-pill);
	background: #fff;
}

.ev-nl__field:focus-within {
	border-color: var(--ev-green);
	box-shadow: 0 0 0 3px rgba(112, 136, 120, 0.2);
}

.ev-nl__field svg {
	flex: none;
	width: 22px;
	height: 22px;
	color: var(--ev-muted);
}

.ev-nl .ev-nl__field input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 54px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 16px;
	color: var(--ev-text);
}

.ev-nl .ev-nl__field input[type="email"]:focus {
	outline: none; /* Fokus wird über .ev-nl__field:focus-within angezeigt */
}

.ev-nl .ev-nl__btn {
	flex: none;
	height: 56px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--ev-radius-pill);
	background: var(--ev-green-dark);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s;
}

.ev-nl .ev-nl__btn:is(:hover, :focus-visible) {
	background: var(--ev-green-darker);
	color: #fff;
}

.ev-nl__legal {
	margin: 14px 0 0;
	font-size: 13px;
	color: var(--ev-muted);
	text-align: center;
}

.ev-nl__legal a {
	color: inherit;
	text-decoration: underline;
}

/* Nur für Screenreader sichtbar */
.ev-nl__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Tablet (Astra-Breakpoint) */
@media (max-width: 921px) {
	.ev-nl {
		grid-template-columns: 1fr;
	}

	.ev-nl__media {
		width: 100%;
		max-width: 460px;
		margin: 0 auto;
	}

	.ev-nl__img {
		aspect-ratio: 5 / 4;
	}
}

/* Mobil */
@media (max-width: 600px) {
	.ev-nl {
		padding: 20px 16px 28px;
		border-radius: 20px;
	}

	.ev-nl__note {
		left: 46%;
		font-size: 14px;
	}

	.ev-nl__features {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.ev-nl__form {
		flex-direction: column;
	}

	.ev-nl .ev-nl__btn {
		width: 100%;
	}
}


/* --------------------------------------------------------------------------
   9. HOCH-/TIEFGESTELLT
   -------------------------------------------------------------------------- */

/* Hoch-/Tiefgestellt ohne Zeilensprung */
sub,
sup {
	font-size: 75%;
	line-height: 100%;
}

sup { vertical-align: 60%; }
sub { vertical-align: -10%; }


/* --------------------------------------------------------------------------
   10. KOMMENTARE
   Antworten sollen sich klar von Kommentaren abheben: Trennlinie zwischen
   Gesprächen, Antworten eingerückt mit dünner Linie, Name und Datum in einer
   Zeile, dezenter Hinweis „Autorin“ bei Katjas Antworten.
   -------------------------------------------------------------------------- */

/* Leere Avatar-Spalte ausblenden (Avatare sind abgeschaltet) */
.wp-block-comment-template .wp-block-column:has(> .wp-block-avatar:empty) {
	display: none;
}

.wp-block-comment-template {
	margin-left: 0;
	padding-left: 0;
}

/* Ein Gespräch = Kommentar mit seinen Antworten, getrennt durch eine Linie */
.wp-block-comment-template > li {
	border-top: 1px solid #d9e1dc;
	padding: 24px 0;
}
.wp-block-comment-template > li:last-child {
	border-bottom: 1px solid #d9e1dc;
}

.wp-block-comment-template .wp-block-columns {
	margin-bottom: 0;
}

/* Kopfzeile: Name fett, Datum daneben */
.wp-block-comment-template .wp-block-column:last-child {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 12px;
}
.wp-block-comment-template .wp-block-column:last-child > * {
	flex-basis: 100%;
	margin-block: 0;
}
.wp-block-comment-template .wp-block-column:last-child > .wp-block-comment-author-name,
.wp-block-comment-template .wp-block-column:last-child > .wp-block-comment-author-name + .wp-block-group {
	flex-basis: auto;
}
.wp-block-comment-template .wp-block-comment-author-name {
	font-size: 1rem !important; /* überschreibt has-small-font-size */
	font-weight: 700;
	color: #3c3c3b;
}
.wp-block-comment-template .wp-block-comment-author-name a {
	color: inherit;
	text-decoration: none;
}
.wp-block-comment-template .wp-block-comment-date,
.wp-block-comment-template .wp-block-comment-date a {
	font-size: 0.85rem !important;
	color: #5a675f;
	text-decoration: none;
}
.wp-block-comment-template .wp-block-comment-content {
	margin-top: 8px;
}
.wp-block-comment-template .wp-block-comment-content p:last-child {
	margin-bottom: 0;
}
.wp-block-comment-template .wp-block-comment-reply-link {
	margin-top: 8px;
}
.wp-block-comment-template .wp-block-comment-reply-link a {
	display: inline-block;
	padding: 0;
	color: #4f6b5a;
	font-size: 0.85rem;
	font-weight: 600;
}

/* Antworten: eingerückt mit dünner Linie links. Bewusst zurückhaltend
   (keine Karte, keine Füllfarbe), damit Katjas Antwort nicht mehr Gewicht
   bekommt als der Kommentar der Leserin (Katjas Wunsch, 4.11.2026). */
.wp-block-comment-template ol {
	list-style: none;
	margin: 16px 0 0 24px;
	padding: 0;
	display: grid;
	gap: 16px;
}
.wp-block-comment-template ol > li {
	border-left: 2px solid #c9d3cc;
	padding: 2px 0 2px 18px;
}

/* Katjas Antworten dezent kennzeichnen */
.wp-block-comment-template li.bypostauthor > .wp-block-columns .wp-block-comment-author-name::after {
	content: "Autorin";
	margin-left: 6px;
	color: #5a675f;
	font-size: 0.85rem;
	font-weight: 400;
}

@media (max-width: 544px) {
	.wp-block-comment-template ol {
		margin-left: 8px;
	}
	.wp-block-comment-template ol > li {
		padding-left: 14px;
	}
}