@charset "UTF-8";
/*
 * Wohler Wochenmarkt - Redesign
 * Designsystem "Sternenplatz".
 * Laedt nach dem Neve-Stylesheet und nach dem Customizer-CSS.
 */

/* ==================================================================
   1. Tokens
   ================================================================== */

:root {
	--woma-bg: #ffffff;
	--woma-surface: #f8f4ef;
	--woma-ink: #2d2b2a;
	--woma-ink-muted: #5e5a57;
	--woma-line: #e7e0d7;
	--woma-accent: #2f7d4a;
	--woma-accent-deep: #24623a;
	--woma-accent-wash: #eef4ef;

	--woma-radius-control: 8px;
	--woma-radius-surface: 14px;

	--woma-space-sm: 8px;
	--woma-space-md: 16px;
	--woma-space-lg: 24px;
	--woma-space-xl: 40px;
	--woma-space-2xl: 64px;
	--woma-section: 96px;

	--woma-display: Subscriber, Georgia, serif;
	--woma-sans: "DM Sans", Helvetica, Arial, sans-serif;

	--woma-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
	--woma-shadow: 0 6px 20px -8px rgba(45, 43, 42, 0.22);
}

@media (max-width: 960px) {
	:root {
		--woma-section: 56px;
		--woma-space-2xl: 40px;
	}
}

/* Neve-Variablen auf das neue Gruen umstellen.
   Alt: dem alten Gruen = 3.38:1 auf Weiss, damit unter WCAG AA. */
body,
:root {
	--nv-primary-accent: #2f7d4a;
	--nv-secondary-accent: #24623a;
	--nv-light-bg: #f8f4ef;
	--nv-text-color: #2d2b2a;
	--nv-c-1: #2f7d4a;
	--nv-c-2: #24623a;
	--primarybtnbg: #2f7d4a;
	--primarybtnhoverbg: #24623a;
	--primarybtnborderradius: 8px;
	--secondarybtnborderradius: 8px;
	--formfieldborderradius: 8px;
	--formfieldbordercolor: #e7e0d7;
}

/* ==================================================================
   2. Typografie
   ================================================================== */

body {
	font-family: var(--woma-sans);
	font-size: 17px;
	line-height: 1.55;
	color: var(--woma-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Subscriber ist eine Auszeichnungsschrift und bleibt gross.
   Unter 26px verliert sie in deutschen Komposita die Lesbarkeit. */
h1,
h2,
.woma-display {
	font-family: var(--woma-display);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
	color: var(--woma-ink);
}

h1,
.nv-single-post-wrap h1,
.entry-title {
	font-size: clamp(42px, 6vw, 72px);
	margin-bottom: var(--woma-space-lg);
}

h2 {
	font-size: clamp(32px, 4.2vw, 48px);
	margin-bottom: var(--woma-space-lg);
}

/* Ab hier uebernimmt DM Sans: alles was gelesen und gescannt wird. */
h3,
h4,
h5,
h6 {
	font-family: var(--woma-sans);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--woma-ink);
}

h3 {
	font-size: clamp(24px, 2.2vw, 28px);
}

h4 {
	font-size: 20px;
}

h5 {
	font-size: 17px;
}

h6 {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--woma-ink-muted);
}

p {
	text-wrap: pretty;
}

/* Fliesstext auf lesbare Zeilenlaenge begrenzen. */
.nv-content-wrap p,
.wp-block-themeisle-blocks-advanced-column p {
	max-width: 68ch;
}

.nv-content-wrap p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--woma-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.18s var(--woma-ease);
}

a:hover {
	color: var(--woma-accent-deep);
}

/* ==================================================================
   3. Fokus: fuer Tastaturbedienung durchgehend sichtbar
   ================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--woma-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ==================================================================
   4. Kopfzeile
   ================================================================== */

.hfg_header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s var(--woma-ease), box-shadow 0.2s var(--woma-ease);
}

.woma-scrolled .hfg_header {
	border-bottom-color: var(--woma-line);
	box-shadow: 0 1px 12px -6px rgba(45, 43, 42, 0.28);
}

.admin-bar .hfg_header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .hfg_header {
		top: 46px;
	}
}

.nav-ul li > a {
	font-family: var(--woma-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--woma-ink);
	position: relative;
	transition: color 0.18s var(--woma-ease);
}

.nav-ul li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 2px;
	height: 2px;
	background: var(--woma-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.22s var(--woma-ease);
}

.nav-ul li > a:hover {
	color: var(--woma-accent);
}

.nav-ul li > a:hover::after,
.nav-ul li.woma-current > a::after,
.nav-ul li.current-menu-item > a::after {
	transform: scaleX(1);
}

.nav-ul li.woma-current > a,
.nav-ul li.current-menu-item > a {
	color: var(--woma-accent);
}

.site-logo .brand p.site-title {
	font-family: MixCutOuts, var(--woma-sans);
	font-weight: 400;
	letter-spacing: 0.02em;
}

/* ==================================================================
   4b. Auftakt
   ================================================================== */

/* Das Logo fuellte auf dem Handy fast den ganzen ersten Bildschirm
   und schob die eigentliche Nachricht unter die Falz. */
@media (max-width: 960px) {
	.nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns:first-child
		.wp-block-image img {
		max-height: 42vh;
		width: auto;
		margin-inline: auto;
	}

	.nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns:first-child {
		padding-top: var(--woma-space-lg);
	}
}

/* Die Einleitung stand groesser da als jede Abschnittsueberschrift. */
.nv-content-wrap
	> .wp-block-themeisle-blocks-advanced-columns:first-child
	p {
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.6;
	max-width: 46ch;
	margin-inline: auto;
}

/* ==================================================================
   5. Abschnittsrhythmus
   ================================================================== */

.nv-content-wrap > .wp-block-group,
.nv-content-wrap > .wp-block-themeisle-blocks-advanced-columns,
.nv-content-wrap > section.wp-block-themeisle-blocks-advanced-columns {
	padding-top: var(--woma-section);
	padding-bottom: var(--woma-section);
	margin-top: 0;
	margin-bottom: 0;
}

/* Der warme Farbton trennt Bloecke, statt einmalig aufzutauchen. */
.wp-block-group.has-nv-light-bg-background-color,
.woma-band {
	background: var(--woma-surface);
}

.wp-block-group.has-nv-light-bg-background-color
	> .wp-block-themeisle-blocks-advanced-columns {
	padding-top: 0;
	padding-bottom: 0;
}

/* ==================================================================
   6. Anbieter-Karten
   ================================================================== */

/* Custom Layouts baut die Spaltenabstaende mit negativen Aussenabstaenden
   am Container plus positiven an den Karten, und der Elternknoten
   (.cl-layout-container) schneidet mit overflow:hidden ab.
   Wir arbeiten stattdessen mit gap, deshalb muessen BEIDE Seiten dieser
   Technik zurueckgesetzt werden. Bleibt der negative Rand stehen, wird die
   erste Spalte links und die erste Reihe oben abgeschnitten. */
.cl-layout--grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--woma-space-xl);
	align-items: stretch;
	margin: 0 !important;
}

.cl-layout-container {
	overflow: visible;
}

@media (max-width: 900px) {
	.cl-layout--grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--woma-space-lg);
	}
}

@media (max-width: 560px) {
	.cl-layout--grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.cl-layout--grid > .cl-layout__item {
	margin: 0 !important;
	width: auto !important;
	float: none !important;
	display: flex;
}

.cl-layout__item .cl-template {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Einheitlicher 4:3-Ausschnitt. Vorher liefen die Bildhoehen
   von 184px bis 327px, dadurch stand jede Karte anders. */
.cl-element-featured_media {
	margin: 0 0 var(--woma-space-md);
}

.cl-element-featured_media__anchor {
	display: block;
	overflow: hidden;
	border-radius: var(--woma-radius-surface);
	background: var(--woma-surface);
	aspect-ratio: 4 / 3;
}

.cl-element-featured_media__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s var(--woma-ease);
}

.cl-element-featured_media__anchor:hover .cl-element-featured_media__image {
	transform: scale(1.04);
}

/* Karten ohne Bild bekommen eine ruhige Flaeche statt eines Lochs. */
.cl-template--image-top .cl-element-section:first-child {
	margin-top: 0;
}

.cl-template--image-top:not(:has(.cl-element-featured_media))::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--woma-radius-surface);
	margin-bottom: var(--woma-space-md);
	background:
		radial-gradient(circle at 30% 30%, rgba(47, 125, 74, 0.10), transparent 60%),
		var(--woma-surface);
	border: 1px solid var(--woma-line);
}

.cl-template--image-top .cl-element-section:last-child {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.basis-title,
.cl-element-title {
	margin: 0 0 6px;
}

/* Custom Layouts bringt einen eigenen Reset mit:
     .cl-template h3   { font-size: 27.2px }
     .cl-template h3 a { font-size: inherit; font-weight: inherit }
   Der zweite Selektor hat Spezifitaet (0,1,2) und schlaegt eine Regel auf
   ".basis-title a". Deshalb hier bewusst mit .cl-template davor, sonst
   bleiben Kartentitel bei 27.2px und werden auf dem Handy fast so gross
   wie die H2 darueber. */
/* Nur Anbieterkarten (h3). Die Marktag-Listen benutzen h5 und werden
   weiter unten dichter gesetzt: sie sind eine Namensliste, kein Karten-Raster. */
.cl-template h3.basis-title,
.cl-template h3.cl-element-title {
	font-size: 20px;
}

/* Der Fettschnitt kommt aus einer Regel mit Spezifitaet (0,3,0):
   .cl-template--id-817 .cl-element--instance-1001 .cl-element-title__anchor
   Deshalb steht das Gewicht hier auf !important statt auf noch mehr Klassen. */
.cl-template h3.basis-title a,
.cl-template h3 a.cl-element-title__anchor {
	font-family: var(--woma-sans) !important;
	font-size: 20px;
	font-weight: 500 !important;
	letter-spacing: 0;
	line-height: 1.3;
	color: var(--woma-ink) !important;
	text-decoration: none !important;
}

.basis-title a:hover,
.cl-element-title__anchor:hover {
	color: var(--woma-accent) !important;
}

/* Gleiche Reset-Falle wie oben: .cl-template div setzt 16px mit (0,1,1). */
.basis-text div,
.cl-element-excerpt,
.cl-template div.basis-text,
.cl-template div.basis-text div,
.cl-template div.cl-element-excerpt,
.cl-template div.cl-element-excerpt div {
	font-family: var(--woma-sans);
	font-size: 15px;
	line-height: 1.5;
	color: var(--woma-ink-muted);
}

.basis-text,
.cl-element-excerpt {
	margin-bottom: var(--woma-space-md);
}

/* Der Link sitzt am Kartenfuss, damit die Links einer Reihe fluchten.
   Custom Layouts setzt je Instanz eigene Margins, daher !important. */
.cl-template--image-top .cl-element-section > .basis-link,
.cl-template--image-top .cl-element-section > .cl-element-link,
.cl-layout--grid .basis-link,
.cl-layout--grid .cl-element-link {
	margin-top: auto !important;
	margin-bottom: 0 !important;
	padding-top: var(--woma-space-sm);
}

.basis-link a,
.cl-element-link__anchor {
	font-family: var(--woma-sans) !important;
	font-size: 14px;
	font-weight: 500;
	color: var(--woma-accent) !important;
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	transition: gap 0.2s var(--woma-ease), color 0.18s var(--woma-ease);
}

.basis-link a:hover,
.cl-element-link__anchor:hover {
	color: var(--woma-accent-deep) !important;
	gap: 10px;
}

/* ==================================================================
   7. Marktag-Listen: der Umbruchfehler auf dem Handy
   ==================================================================
   Das Customizer-CSS setzt flex-shrink:0 auf den Namen. Dadurch
   ragten lange Namen bis 446px in einem 375px-Viewport heraus und
   wurden mitten im Wort abgeschnitten. */

.wechselstand-datumsklappe {
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0;
	row-gap: 2px;
}

.wechselstand-datumsklappe .wechselanbieter-name,
.wechselstand-datumsklappe .wechselanbieter-name a {
	flex-shrink: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.anbieterliste .cl-layout__item {
	padding: 3px 0;
}

/* Auf Touchgeraeten brauchen die Listenlinks eine greifbare Flaeche. */
@media (max-width: 780px) {
	/* Der Innenabstand des Links liefert bereits 41px Trefferflaeche,
	   deshalb hier nur so viel, dass die Zeilen nicht kleben. */
	.anbieterliste .cl-layout__item {
		padding: 3px 0;
	}

	.anbieter-name a,
	.wechselanbieter-name a,
	.basis-link a,
	.cl-element-link__anchor {
		display: inline-block;
		min-height: 24px;
		padding-block: 8px;
	}

	.nav-ul li > a {
		padding-block: 12px;
	}
}

/* Die Namen der Marktag-Listen sind Fliesstext-Groesse, keine Kartentitel.
   Custom Layouts gibt den h5 ausserdem 5px Innenabstand oben und unten,
   was zusammen mit einer grossen Zeilenhoehe 40px hohe Zeilen ergab. */
.cl-template h5.anbieter-name,
.cl-template h5.wechselanbieter-name,
.anbieterliste .cl-element-title {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin: 0 !important;
}

.anbieter-name a,
.wechselanbieter-name a,
.cl-template h5.anbieter-name a,
.cl-template h5.wechselanbieter-name a {
	font-family: var(--woma-sans) !important;
	font-size: 17px !important;
	font-weight: 400 !important;
	line-height: 1.45 !important;
	color: var(--woma-ink) !important;
	text-decoration: none !important;
}

.anbieter-name a:hover,
.wechselanbieter-name a:hover {
	color: var(--woma-accent) !important;
	text-decoration: underline !important;
}

/* Steht in derselben Zeile wie der Name, darf also nicht deutlich
   kleiner sein. Der Reset ".cl-template div" setzt hier 16px. */
.wechselanbieter-excerpt,
.cl-template div.wechselanbieter-excerpt,
.cl-template div.wechselanbieter-excerpt div {
	color: var(--woma-ink-muted);
	font-size: 16px;
	line-height: 1.45;
	padding-bottom: 0 !important;
}

/* Auf dem Handy untereinander statt in eine Zeile gequetscht. */
@media (max-width: 640px) {
	.wechselstand-datumsklappe {
		flex-direction: column;
		align-items: flex-start;
	}

	.wechselstand-datumsklappe .wechselanbieter-name::after {
		content: "" !important;
	}

	.wechselanbieter-excerpt {
		font-size: 15px;
		padding-left: 0 !important;
	}
}

/* Die Anbieterlisten im Marktag-Block: eine Spalte, ruhige Trennung. */
.anbieterliste.cl-layout--grid {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
}

/* Lange Anbieterraster oeffnen zunaechst gekuerzt.
   Ohne JavaScript bleiben alle Karten sichtbar. */
.cl-layout--grid.woma-collapsed > .cl-layout__item[hidden] {
	display: none;
}

.woma-more {
	display: flex;
	justify-content: center;
	margin-top: var(--woma-space-xl);
}

.woma-more button {
	font-family: var(--woma-sans);
	font-size: 15px;
	font-weight: 500;
	color: var(--woma-accent);
	background: transparent;
	border: 1px solid var(--woma-line);
	border-radius: var(--woma-radius-control);
	padding: 12px 24px;
	min-height: 44px;
	cursor: pointer;
	transition: background 0.18s var(--woma-ease), border-color 0.18s var(--woma-ease);
}

.woma-more button:hover {
	background: var(--woma-surface);
	border-color: var(--woma-accent);
}

/* ==================================================================
   8. Aufklapp-Listen (Weitere Termine)
   ================================================================== */

.wp-block-themeisle-blocks-accordion-item {
	border: 1px solid var(--woma-line) !important;
	border-radius: var(--woma-radius-control);
	margin-bottom: var(--woma-space-sm);
	overflow: hidden;
	background: var(--woma-bg);
}

.wp-block-themeisle-blocks-accordion-item__title {
	font-family: var(--woma-sans) !important;
	font-size: 17px !important;
	font-weight: 500;
	background: var(--woma-bg) !important;
	transition: background 0.18s var(--woma-ease);
	cursor: pointer;
}

.wp-block-themeisle-blocks-accordion-item__title:hover {
	background: var(--woma-surface) !important;
}

.wp-block-themeisle-blocks-accordion-item[open]
	.wp-block-themeisle-blocks-accordion-item__title {
	background: var(--woma-accent-wash) !important;
	color: var(--woma-accent-deep);
}

/* ==================================================================
   9. Schaltflaechen
   ================================================================== */

.button,
.btn,
button,
input[type="submit"],
.wp-block-button__link,
.kaliforms-form-container button[type="submit"] {
	font-family: var(--woma-sans);
	font-weight: 500;
	border-radius: var(--woma-radius-control);
	transition: background-color 0.18s var(--woma-ease),
		transform 0.12s var(--woma-ease), box-shadow 0.18s var(--woma-ease);
	will-change: transform;
}

/* Vorher zeigte der Hover keine Wirkung: Grund- und Hoverfarbe
   waren beide dem alten Gruen. */
.button.button-primary:hover,
.btn:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.kaliforms-form-container button[type="submit"]:hover {
	background-color: var(--woma-accent-deep) !important;
	color: #fff !important;
	box-shadow: var(--woma-shadow);
}

.button:active,
.btn:active,
button:active,
input[type="submit"]:active,
.wp-block-button__link:active {
	transform: translateY(1px);
	box-shadow: none;
}

/* ==================================================================
   10. Formulare
   ================================================================== */

/* Kali Forms setzt die Klasse auf das form-Element selbst, deshalb
   greifen Nachfahren-Selektoren allein nicht fuer den Absendeknopf. */
.kaliforms-form-container input[type="submit"],
form.kaliforms-form-container input[type="submit"],
form.kaliforms-form-container button[type="submit"] {
	border-radius: var(--woma-radius-control) !important;
	font-family: var(--woma-sans) !important;
	font-weight: 500;
	min-height: 48px;
	background-color: var(--woma-accent) !important;
	border-color: var(--woma-accent) !important;
	color: #fff !important;
}

.kaliforms-form-container input[type="submit"]:hover,
form.kaliforms-form-container input[type="submit"]:hover,
form.kaliforms-form-container button[type="submit"]:hover {
	background-color: var(--woma-accent-deep) !important;
	border-color: var(--woma-accent-deep) !important;
	box-shadow: var(--woma-shadow);
}

.kaliforms-form-container input[type="submit"]:active,
form.kaliforms-form-container input[type="submit"]:active {
	transform: translateY(1px);
	box-shadow: none;
}

.kaliforms-form-container input[type="text"],
.kaliforms-form-container input[type="email"],
.kaliforms-form-container input[type="tel"],
.kaliforms-form-container textarea,
.mailpoet_form input[type="email"],
.mailpoet_form input[type="text"] {
	height: auto !important;
	font-family: var(--woma-sans) !important;
	font-size: 16px !important;
	min-height: 48px;
	padding: 12px 14px !important;
	border: 1px solid var(--woma-line) !important;
	border-radius: var(--woma-radius-control) !important;
	background: var(--woma-bg) !important;
	color: var(--woma-ink) !important;
	transition: border-color 0.18s var(--woma-ease),
		box-shadow 0.18s var(--woma-ease);
}

.kaliforms-form-container textarea {
	min-height: 140px;
}

.kaliforms-form-container input:focus,
.kaliforms-form-container textarea:focus,
.mailpoet_form input:focus {
	outline: none !important;
	border-color: var(--woma-accent) !important;
	box-shadow: 0 0 0 3px rgba(47, 125, 74, 0.16) !important;
}

.kaliforms-form-container label {
	font-family: var(--woma-sans);
	font-size: 15px;
	font-weight: 500;
	color: var(--woma-ink);
}

.kaliforms-form-container .is-invalid-input:not(:focus) {
	border-color: #b3261e !important;
	background-color: #fdf3f2 !important;
}

/* ==================================================================
   11. Karte und Kontaktblock
   ================================================================== */

.wpgmza_map {
	border-radius: var(--woma-radius-surface);
	overflow: hidden;
	border: 1px solid var(--woma-line);
}

/* ==================================================================
   12. Nach-oben-Schaltflaeche
   ==================================================================
   Vorher war sie ab Scrollposition 0 sichtbar und lag ueber dem Text. */

.scroll-to-top {
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.22s var(--woma-ease), transform 0.22s var(--woma-ease),
		visibility 0.22s;
	background: var(--woma-accent) !important;
	border-radius: var(--woma-radius-control) !important;
	box-shadow: var(--woma-shadow);
}

.woma-scrolled .scroll-to-top {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.scroll-to-top:hover {
	background: var(--woma-accent-deep) !important;
}

/* ==================================================================
   13. Fusszeile
   ================================================================== */

.woma-footer-wrap {
	background: var(--woma-surface);
	border-top: 1px solid var(--woma-line);
	margin-top: var(--woma-section);
}

.site-footer,
.site-footer .footer--row-inner {
	background: var(--woma-surface);
	color: var(--woma-ink);
}

/* Der Neve-Hinweis wird durch die eigene Fusszeile ersetzt. */
.site-footer .builder-item.cr {
	display: none;
}

.site-footer .footer-bottom-inner {
	padding: 0;
}

.woma-footer p {
	color: var(--woma-ink-muted);
	font-size: 16px;
	margin: 0;
	max-width: 34ch;
}

.woma-footer__notice {
	font-size: 13px;
	color: var(--woma-accent-deep);
	background: var(--woma-accent-wash);
	padding: 4px 10px;
	border-radius: var(--woma-radius-control);
}

.woma-footer__legal-links {
	display: inline-flex;
	gap: var(--woma-space-md);
}

.woma-footer {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr;
	gap: var(--woma-space-xl);
	padding: var(--woma-space-2xl) 0 var(--woma-space-xl);
}

@media (max-width: 760px) {
	.woma-footer {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--woma-space-lg);
	}
}

/* Bewusst kein h2: eine Ueberschrift, die kleiner rendert als jede h3,
   kehrt die Rangfolge des Dokuments um. Optisch identisch.
   Zwei Klassen, damit die Regel ".woma-footer p" darunter nicht gewinnt. */
.woma-footer .woma-footer__label {
	font-family: var(--woma-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--woma-ink-muted);
	margin: 0 0 var(--woma-space-md);
}

.woma-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woma-footer li {
	margin-bottom: 6px;
}

.woma-footer a {
	color: var(--woma-ink);
	text-decoration: none;
	font-size: 16px;
}

.woma-footer a:hover {
	color: var(--woma-accent);
	text-decoration: underline;
}

.woma-footer__legal {
	border-top: 1px solid var(--woma-line);
	padding: var(--woma-space-md) 0 var(--woma-space-xl);
	display: flex;
	flex-wrap: wrap;
	gap: var(--woma-space-md);
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	color: var(--woma-ink-muted);
}

.woma-footer__legal a {
	color: var(--woma-ink-muted);
	font-size: 14px;
}

/* ==================================================================
   14. Bewegung zurueckhaltend halten
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}