/* ==========================================================================
   Verein gegen Altersarmut – Komponenten
   Farben, Schriften und Grössen kommen aus theme.json; hier die Bauteile
   des Prototyps, auf die Markup-Struktur der WordPress-Blöcke übertragen.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
	--sage: var(--wp--preset--color--sage);
	--sage-deep: var(--wp--preset--color--sage-deep);
	--sage-soft: var(--wp--preset--color--sage-soft);
	--clay: var(--wp--preset--color--clay);
	--clay-deep: var(--wp--preset--color--clay-deep);
	--sand: var(--wp--preset--color--sand);
	--cream: var(--wp--preset--color--cream);
	--cream-deep: var(--wp--preset--color--cream-deep);
	--umber: var(--wp--preset--color--umber);
	--ink: var(--umber);
	--body: var(--wp--preset--color--body);
	--paper: var(--wp--preset--color--paper);
	--on-color: var(--cream);
	--on-color-6: rgba(246, 239, 228, .66);

	--font-display: var(--wp--preset--font-family--display);
	--font-ui: var(--wp--preset--font-family--ui);
	--font-body: var(--wp--preset--font-family--body);

	--gutter: 72px;
	--panel-pad: 64px;
	--header-h: 83px;
	--section-pad: clamp(64px, 5.6vw, 128px);
	--flow: :is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content);
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }

/* ---------- 2. Vertikaler Rhythmus -------------------------------------
   blockGap ist in theme.json 0; die Abstände folgen hier dem Prototyp. */
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > :is(h1, h2, h3) { margin-block: 0 .5em; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > :is(h4, h5, h6) { margin-block: 0 .6em; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > p { margin-block: 0 1.3em; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > :last-child { margin-bottom: 0; }

h1, h2, h3, .wp-block-heading { text-wrap: balance; }
p { max-width: 68ch; }
/* In Abschnitten gilt sonst die Inhaltsbreite von WordPress – Absätze behalten ihr Lesemass. */
.is-layout-constrained > p:where(:not(.has-text-align-center)) { max-width: 68ch; }
.has-text-align-center { margin-inline: auto; }

a:hover { text-underline-offset: .18em; }
a[href^="tel:"] { white-space: nowrap; }
:focus-visible { outline: 3px solid var(--clay-deep); outline-offset: 3px; }

/* ---------- 3. Absatzstile ----------------------------------------------- */
p.is-style-eyebrow {
	font-family: var(--font-ui); font-size: .8rem; letter-spacing: .12em;
	text-transform: uppercase; font-weight: 500; color: var(--clay-deep);
}
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > p.is-style-eyebrow { margin-bottom: 1.25rem; }

p.is-style-lede {
	font-family: var(--font-ui); font-size: clamp(1.15rem, 1rem + .8vw, 1.42rem);
	font-weight: 500; letter-spacing: -.03em; line-height: 1.28; color: var(--ink); max-width: 34ch;
}
p.is-style-intro { font-size: 1.09rem; max-width: 62ch; }

p.is-style-textlink a {
	font-family: var(--font-ui); font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
	color: var(--clay-deep); display: inline-flex; align-items: center; gap: .5em;
}
p.is-style-textlink a::after { content: "→"; transition: transform 150ms ease; }
p.is-style-textlink a:hover::after { transform: translateX(4px); }

p.is-style-rolle {
	font-family: var(--font-ui); font-size: .8rem; font-weight: 600; letter-spacing: .1em;
	text-transform: uppercase; color: var(--clay-deep);
}
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > p.is-style-rolle { margin-bottom: 1.4em; }

/* Platzhalter «Noch offen»: das erste <strong> wird zum Label */
p.is-style-platzhalter {
	border: 1px dashed var(--clay); background: rgba(199, 169, 124, .14);
	padding: 22px 24px; max-width: 62ch; font-size: .96rem;
}
p.is-style-platzhalter > strong:first-child {
	display: block; font-family: var(--font-ui); font-size: .7rem; letter-spacing: .14em;
	text-transform: uppercase; font-weight: 700; color: var(--clay-deep); margin-bottom: 6px;
}
:is(.is-style-abschnitt-dunkel, .site-footer) p.is-style-platzhalter { border-color: var(--sand); background: rgba(246, 239, 228, .10); color: var(--on-color-6); }
:is(.is-style-abschnitt-dunkel, .site-footer) p.is-style-platzhalter > strong:first-child { color: var(--on-color); }

/* ---------- 4. Überschriftenstile ---------------------------------------- */
.wp-block-heading.is-style-karte {
	font-family: var(--font-display); font-weight: 400;
	font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.05rem); line-height: 1.15;
	letter-spacing: -.024em; color: var(--ink);
}
.wp-block-heading.is-style-ui,
.wp-block-heading[class*="is-style-icon-"] {
	font-family: var(--font-ui); font-size: 1.2rem; font-weight: 700;
	letter-spacing: -.024em; line-height: 1.15; color: var(--ink);
}
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > .wp-block-heading:is(.is-style-ui, [class*="is-style-icon-"]) { margin-bottom: .4em; }

/* Icons über dem Titel, als Maske – färben sich mit der Schrift */
.wp-block-heading[class*="is-style-icon-"]::before {
	content: ""; display: block; width: 34px; height: 34px; margin-bottom: 20px;
	background: var(--sage);
	-webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.is-style-icon-schild      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M12 2.5 4 6v6c0 5 3.4 8.2 8 9.5 4.6-1.3 8-4.5 8-9.5V6l-8-3.5Z'/%3E%3C/svg%3E"); }
.is-style-icon-puls        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M3 12h4l2.5 6 5-15 2.5 9h4'/%3E%3C/svg%3E"); }
.is-style-icon-sprechblase { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M21 12a8.5 8.5 0 0 1-12.3 7.6L3 21l1.5-5.4A8.5 8.5 0 1 1 21 12Z'/%3E%3C/svg%3E"); }
.is-style-icon-plus        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E"); }
.is-style-icon-auge        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.5 6.5-9.5 6.5S2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.is-style-icon-dach        { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 16h16M8 12l4-6 4 6'/%3E%3C/svg%3E"); }
.is-style-icon-person      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='12' cy='8' r='3.4'/%3E%3Cpath d='M5 20c0-3.6 3.1-6 7-6s7 2.4 7 6'/%3E%3C/svg%3E"); }
.is-style-icon-kreise      { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Ccircle cx='9' cy='12' r='5.2'/%3E%3Ccircle cx='15' cy='12' r='5.2'/%3E%3C/svg%3E"); }

/* ---------- 5. Abschnitte ------------------------------------------------ */
.wp-block-post-content > .alignfull,
.wp-block-post-content > .wp-block-cover { margin-block: 0 !important; }

.wp-block-group:is(.is-style-abschnitt, .is-style-abschnitt-warm, .is-style-abschnitt-dunkel) {
	padding-top: var(--section-pad); padding-bottom: var(--section-pad);
}
.wp-block-group.is-style-abschnitt { background: var(--paper); }
.wp-block-group.is-style-abschnitt-warm { background: var(--cream); }
.wp-block-group.is-style-abschnitt-knapp {
	background: var(--cream); padding-top: clamp(48px, 4vw, 80px); padding-bottom: clamp(48px, 4vw, 80px);
}
.wp-block-group.is-style-abschnitt-dunkel {
	background: var(--sage) url("../img/band-dark.svg") center / cover no-repeat;
	color: var(--on-color);
	position: relative; isolation: isolate; overflow: hidden;
}
/* Unscharfer warmer Kreis hinter dem Inhalt: wird sehr langsam grösser und kleiner.
   Weicher Verlauf statt Blur-Filter, damit nur skaliert und nicht neu gezeichnet wird. */
.wp-block-group.is-style-abschnitt-dunkel::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: 51%; top: 52%; width: max(72%, 560px); aspect-ratio: 1.24;
	background: radial-gradient(closest-side,
		rgba(188, 132, 101, .30), rgba(188, 132, 101, .27) 28%, rgba(188, 132, 101, .17) 56%,
		rgba(188, 132, 101, .06) 80%, rgba(188, 132, 101, 0));
	transform: translate(-50%, -50%);
	animation: vgaa-puls 12s ease-in-out infinite alternate;
	will-change: transform;
}
@keyframes vgaa-puls {
	from { transform: translate(-50%, -50%) scale(.88); }
	to   { transform: translate(-50%, -50%) scale(1.12); }
}
.is-style-abschnitt-dunkel :is(h1, h2, h3, h4, h5, h6).wp-block-heading, .is-style-abschnitt-dunkel :is(h1, h2, h3, h4, h5, h6) { color: var(--on-color); }
.is-style-abschnitt-dunkel p.is-style-eyebrow,
.is-style-abschnitt-dunkel p.is-style-textlink a { color: var(--on-color); }
.is-style-abschnitt-dunkel p:not(.is-style-textlink) a:not(.wp-element-button) { color: var(--on-color); text-decoration: underline; text-underline-offset: .18em; }
.is-style-abschnitt-dunkel .wp-block-heading[class*="is-style-icon-"]::before { background: var(--sand); }
.is-style-abschnitt-dunkel .is-style-punkte li::before { background: var(--sand); }

/* Abstand zwischen aufeinanderfolgenden Zeilen im selben Abschnitt */
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > .vgaa-kopf { max-width: 46ch; margin-bottom: clamp(40px, 4.5vw, 72px); }
.vgaa-kopf > p { max-width: 60ch; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > .vgaa-row + .vgaa-row { margin-top: clamp(56px, 5.5vw, 96px); }
.vgaa-schmal { max-width: 880px; }
/* Schmale Bausteine stehen wie im Prototyp links in der Inhaltsspalte, nicht zentriert.
   Die Spalte ist höchstens 1280px breit und auf breiten Bildschirmen mittig – der linke Rand rechnet das nach.
   In Abschnitten mit 880px Inhaltsbreite (Klasse vgaa-eng) gilt dasselbe mit 880px. */
.is-layout-constrained > :is(.vgaa-kopf, .vgaa-schmal, .vgaa-44ch, .is-style-platzhalter, p:not(.has-text-align-center)) { margin-left: max(0px, calc((100% - var(--wp--style--global--content-size, 1280px)) / 2)) !important; margin-right: auto !important; }
.vgaa-eng.is-layout-constrained > :is(.vgaa-kopf, .vgaa-schmal, .vgaa-44ch, .is-style-platzhalter, p:not(.has-text-align-center)) { margin-left: max(0px, calc((100% - 880px) / 2)) !important; }
p.vgaa-44ch, .vgaa-44ch { max-width: 44ch; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > .vgaa-abstand { margin-top: 52px; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > .vgaa-abstand-s { margin-top: 40px; }

/* ---------- 6. Buttons --------------------------------------------------- */
.wp-block-button .wp-block-button__link { transition: background-color 150ms ease; text-align: center; }
.wp-block-button.is-style-spenden .wp-block-button__link { background: var(--clay-deep); color: var(--on-color); }
.wp-block-button.is-style-spenden .wp-block-button__link:hover { background: #764930; }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--ink); border: 0; box-shadow: inset 0 0 0 2px var(--sage);
	padding: 14px 28px;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--sage); color: var(--on-color); }
:is(.is-style-abschnitt-dunkel, .site-footer) .wp-block-button.is-style-outline .wp-block-button__link { color: var(--on-color); box-shadow: inset 0 0 0 2px var(--on-color-6); }
:is(.is-style-abschnitt-dunkel, .site-footer) .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--on-color); color: var(--ink); }
.wp-block-button__link:hover { text-decoration: none; }

.wp-block-buttons { gap: 18px; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > .wp-block-buttons { margin-top: 36px; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > .wp-block-buttons:first-child { margin-top: 0; }
.wp-block-buttons.is-style-gleich-breit { display: grid; grid-template-columns: minmax(0, max-content); align-items: stretch; }
.wp-block-buttons.is-style-gleich-breit .wp-block-button { width: auto; }
.wp-block-buttons.is-style-gleich-breit .wp-block-button__link { width: 100%; }

/* ---------- 7. Hero (Cover mit Panel) ------------------------------------ */
.wp-block-cover.is-style-hero {
	min-height: 0; align-items: stretch; color: var(--body);
	padding: clamp(48px, 5vw, 88px) var(--wp--style--root--padding-right, 8vw) clamp(48px, 5vw, 88px) var(--wp--style--root--padding-left, 8vw);
}
.wp-block-cover.is-style-hero .wp-block-cover__inner-container { width: 100%; max-width: 1280px; margin-inline: auto; color: inherit; }
.wp-block-cover.is-style-hero .wp-block-cover__background { opacity: 0 !important; }

.wp-block-group.is-style-panel {
	background: var(--paper); color: var(--body);
	padding: clamp(36px, 4.6vw, 64px);
	max-width: 560px !important; margin-left: 0 !important; margin-right: auto !important;
}
.wp-block-cover .wp-block-group.is-style-panel :is(h1, h2, h3, h4) { color: var(--ink); }
.wp-block-cover .wp-block-group.is-style-panel p { color: var(--body); max-width: 46ch; }
.wp-block-cover .wp-block-group.is-style-panel p.is-style-lede { color: var(--ink); }
.wp-block-cover .wp-block-group.is-style-panel p.is-style-eyebrow { color: var(--clay-deep); }
.is-style-panel > h1 { margin-bottom: .45em !important; }
.is-style-panel > p.is-style-lede { margin-bottom: 1.25rem !important; }
.is-style-panel > p.is-style-eyebrow { margin-bottom: .9rem !important; }

/* ---------- 8. Karten, Flächen, Raster ----------------------------------- */
.wp-block-group.is-style-karte {
	background: var(--paper); padding: clamp(32px, 3.6vw, 48px);
	display: flex; flex-direction: column; gap: 16px; height: 100%;
}
.is-style-abschnitt .wp-block-group.is-style-karte { background: var(--cream); }
.wp-block-group.is-style-karte > * { margin: 0 !important; }
.wp-block-group.is-style-karte::before {
	content: ""; display: block; flex: 0 0 auto; width: 44px; height: 44px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M3 30a17 17 0 0 1 34 0' fill='none' stroke='%2355695E' stroke-width='3.2'/%3E%3Cpath d='M12 30a8 8 0 0 1 16 0' fill='none' stroke='%23BC8465' stroke-width='3.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wp-block-group.is-style-karte > p.is-style-textlink { margin-top: auto !important; padding-top: 8px; }
.wp-block-group.is-style-karte > .wp-block-buttons { margin-top: auto !important; }

.wp-block-group.is-style-flaeche { background: var(--cream); padding: 40px; }
.is-style-abschnitt-warm .wp-block-group.is-style-flaeche { background: var(--paper); }

.wp-block-group.is-style-drei-karten {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--gutter);
}
.wp-block-group.is-style-drei-karten > * { grid-column: span 2; margin: 0 !important; }
.wp-block-group.is-style-drei-karten > :nth-child(3) { grid-column: 2 / span 2; }

.vgaa-grid { display: grid; gap: var(--gutter); }
.vgaa-grid > * { margin: 0 !important; }
.vgaa-grid.vgaa-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vgaa-grid.vgaa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.vgaa-grid.vgaa-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px; }
.vgaa-grid.vgaa-grid--aside { grid-template-columns: 1fr 1fr; align-items: center; }
.vgaa-grid.vgaa-grid--top { align-items: start; }
.vgaa-grid .wp-block-group.is-style-karte { height: 100%; }
.vgaa-grid p:last-child, .vgaa-grid .wp-block-group > :last-child { margin-bottom: 0; }

/* Blurbs */
.vgaa-blurb p { font-size: 1rem; }

/* Abschnittskopf zweispaltig */
.wp-block-columns.is-style-abschnittskopf {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter);
	align-items: end; margin-bottom: clamp(40px, 4.5vw, 72px);
}
.wp-block-columns.is-style-abschnittskopf > .wp-block-column { margin: 0; flex-basis: auto; }
.is-style-abschnittskopf h2 { margin-bottom: 0 !important; }
.is-style-abschnittskopf p.is-style-intro { max-width: 46ch; }

/* ---------- 9. Medien + Text --------------------------------------------- */
.wp-block-media-text.is-style-zeile {
	grid-template-columns: 1fr 1fr !important; column-gap: var(--gutter); align-items: center;
}
.wp-block-media-text.is-style-zeile .wp-block-media-text__content { padding: 0; }
.wp-block-media-text.is-style-zeile .wp-block-media-text__media { background: var(--cream-deep); align-self: center; }
.wp-block-media-text.is-style-zeile .wp-block-media-text__media img {
	width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; min-height: 260px;
}
.wp-block-media-text.is-style-person {
	grid-template-columns: minmax(0, 280px) minmax(0, 1fr) !important; column-gap: var(--gutter); align-items: start;
}
.wp-block-media-text.is-style-person.has-media-on-the-right { grid-template-columns: minmax(0, 1fr) minmax(0, 280px) !important; }
.wp-block-media-text.is-style-person .wp-block-media-text__content { padding: 0; }
.wp-block-media-text.is-style-person .wp-block-media-text__media img {
	width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--cream-deep);
}
.is-style-person .wp-block-media-text__content > h3 { margin-bottom: .25em !important; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > .wp-block-media-text.is-style-person + .wp-block-media-text.is-style-person { margin-top: clamp(48px, 5.5vw, 80px); }

/* ---------- 10. Ablauf-Kacheln ------------------------------------------- */
.vgaa-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.vgaa-chips > .wp-block-group { display: flex; flex-direction: column; gap: 10px; padding: 30px 28px; border-radius: 10px; margin: 0 !important; }
.vgaa-chips > .wp-block-group > * { margin: 0 !important; color: inherit; }
.vgaa-chips .chip__num { font-family: var(--font-ui); font-size: .86rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.vgaa-chips .has-sand-background-color .chip__num { opacity: .7; }
.vgaa-chips .wp-block-heading { font-size: 1.3rem; line-height: 1.25; color: inherit; }
.vgaa-chips p:not(.chip__num) { font-size: 1.06rem; line-height: 1.55; opacity: .92; }

/* ---------- 11. Listen --------------------------------------------------- */
ul.is-style-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
ul.is-style-punkte li { position: relative; padding-left: 34px; max-width: 62ch; margin: 0; }
ul.is-style-punkte li::before {
	content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
	width: 10px; height: 10px; border-radius: 50%; background: var(--sage);
}
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > ul.is-style-punkte { margin-block: 0; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > ul.is-style-punkte.vgaa-liste-abstand { margin-block: 24px; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > ul.is-style-punkte.vgaa-liste-oben { margin-top: 20px; }

/* ---------- 12. Kontakt -------------------------------------------------- */
.wp-block-group.is-style-kontaktliste { display: grid; gap: 24px; margin-top: 32px; }
.wp-block-group.is-style-kontaktliste > * { margin: 0 !important; }
.wp-block-group.is-style-kontaktliste > .wp-block-group > * { margin: 0 !important; }
p.is-style-label { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--body); margin-bottom: 4px !important; }
p.is-style-wert { font-family: var(--font-ui); font-size: 1.15rem; font-weight: 500; color: var(--ink); letter-spacing: -.02em; }

.vgaa-form { display: grid; gap: 26px; max-width: 640px; }
.vgaa-form .field { display: grid; gap: 9px; }
.vgaa-form label { font-family: var(--font-ui); font-weight: 600; font-size: .92rem; letter-spacing: -.01em; color: var(--ink); }
.vgaa-form :is(input, textarea, select) {
	box-sizing: border-box;
	font: 400 1rem/1.5 var(--font-body); color: var(--ink); background: var(--paper);
	border: 1px solid var(--cream-deep); border-radius: 0; padding: 13px 15px; width: 100%;
}
.vgaa-form :is(input, textarea):focus { border-color: var(--sage); }
.vgaa-form textarea { min-height: 160px; resize: vertical; }
.vgaa-form button[disabled], .vgaa-form button[disabled]:hover { background: var(--sage); opacity: .45; cursor: not-allowed; }

/* ---------- 13. Kopfzeile ------------------------------------------------ */
.wp-site-blocks > * { margin-block: 0; }
.vgaa-header-part { position: sticky; top: 0; z-index: 60; }
.admin-bar .vgaa-header-part { top: var(--wp-admin--admin-bar--height, 32px); }
.site-header { background: var(--paper); border-bottom: 1px solid var(--cream-deep); }
.site-header__inner { gap: 28px; padding: 20px 0; }

.vgaa-logo { position: relative; padding-left: 62px; min-height: 48px; justify-content: center; }
.vgaa-logo::before {
	content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 50px; height: 48px;
	background: url("../img/signet.svg") center / contain no-repeat;
}
.vgaa-logo.is-inverted::before {
	background-image: url("../img/signet-hell.svg");
}
.vgaa-logo > * { margin: 0 !important; line-height: 1.1; }
.vgaa-logo .vgaa-logo__name { font-family: var(--font-display); font-size: 1.24rem; font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
.vgaa-logo .vgaa-logo__name a { color: inherit; text-decoration: none; }
.vgaa-logo .vgaa-logo__tag {
	font-family: var(--font-ui); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--body); margin-top: 3px !important; max-width: none;
}
.vgaa-logo.is-inverted :is(.vgaa-logo__name, .vgaa-logo__tag) { color: var(--on-color); }

.header-actions { gap: 20px; }
.vgaa-nav .wp-block-navigation__container { gap: 30px; }
.vgaa-nav .wp-block-navigation-item__content {
	font-family: var(--font-ui); font-size: .81rem; letter-spacing: .09em; text-transform: uppercase;
	font-weight: 500; color: var(--body); padding: 6px 0; border-bottom: 2px solid transparent; text-decoration: none;
}
.vgaa-nav .wp-block-navigation-item__content:hover { color: var(--ink); border-bottom-color: var(--clay); text-decoration: none; }
.vgaa-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--ink); border-bottom-color: var(--sage); }
.vgaa-header-cta { gap: 0; }
.vgaa-header-cta .wp-block-button__link { font-size: .93rem; padding: 11px 20px; white-space: nowrap; }

/* ---------- 14. Fusszeile ------------------------------------------------ */
.site-footer { background: var(--sage); color: var(--on-color); padding-top: clamp(72px, 6vw, 112px); padding-bottom: 48px; }
.site-footer .footer-grid { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: 64px; margin: 0; }
.site-footer .footer-grid > .wp-block-column { margin: 0; flex-basis: auto; }
.site-footer .footer-heading {
	color: var(--on-color); font-family: var(--font-ui); font-size: 1.05rem; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase; line-height: 1.15;
}
.site-footer p { color: var(--on-color-6); font-size: .96rem; }
.site-footer a { color: var(--on-color-6); font-size: .96rem; }
.site-footer a:hover { color: var(--on-color); text-decoration: none; }
.site-footer .footer-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.site-footer .footer-nav li { margin: 0; line-height: 1.62; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > p.footer-mission { margin-top: 26px; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > p.footer-contact { margin-top: 20px; }
:is(.is-layout-flow, .is-layout-constrained, .wp-block-media-text__content) > .footer-cta { margin-top: 26px; }
.site-footer .footer-cta .wp-block-button__link { font-size: .93rem; padding: 11px 20px; }
.site-footer .footer-bottom {
	margin-top: clamp(48px, 5vw, 80px); padding-top: 28px; border-top: 1px solid rgba(246, 239, 228, .22);
	gap: 12px 28px; font-size: .88rem; color: var(--on-color-6);
}
.site-footer .footer-bottom p { margin: 0; font-size: .88rem; }
.site-footer .footer-legal { list-style: none; display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; }
.site-footer .footer-legal li { margin: 0; }

/* ---------- 15. Fehlerseite ---------------------------------------------- */
.wp-block-group.is-style-fehlerband {
	min-height: calc(100vh - var(--header-h)); min-height: calc(100dvh - var(--header-h));
	background: var(--cream); display: grid; place-content: center; text-align: center; padding: 56px 0;
}
.wp-block-heading.is-style-fehlercode {
	font-family: var(--font-display); font-weight: 400; font-size: clamp(5rem, 2.5rem + 13vw, 11rem);
	line-height: 1; letter-spacing: -.03em; color: var(--umber); margin: 0 0 clamp(10px, 1.4vw, 18px) !important;
}
.is-style-fehlerband > p.fehlerband__text { max-width: none; margin: 0 0 clamp(28px, 3.5vw, 48px) !important; }

/* ---------- 16. Bewegung ------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(18px); }
.js .reveal.is-visible { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; }

/* Gestaffeltes Einblenden: die Kinder gleiten nacheinander (links nach rechts) nach oben. */
.js .reveal-stagger > * { opacity: 0; transform: translateY(28px); }
.js .reveal-stagger.is-visible > * { opacity: 1; transform: none; transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal-stagger.is-visible > :nth-child(2) { transition-delay: .12s; }
.js .reveal-stagger.is-visible > :nth-child(3) { transition-delay: .24s; }
.js .reveal-stagger.is-visible > :nth-child(4) { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.wp-block-group.is-style-abschnitt-dunkel::before { animation: none; }
	.js .reveal, .js .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ---------- 17. Umbrüche ------------------------------------------------- */
@media (max-width: 980px) {
	html body { --wp--style--root--padding-left: 6vw; --wp--style--root--padding-right: 6vw; }
	:root { --gutter: 48px; }

	/* Navigation klappt schon ab 980 px zusammen, wie im Prototyp */
	.vgaa-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.vgaa-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }

	.wp-block-group.is-style-panel { max-width: none !important; }
	.wp-block-columns.is-style-abschnittskopf { grid-template-columns: 1fr; gap: 24px; }
	.vgaa-grid:is(.vgaa-grid--2, .vgaa-grid--3, .vgaa-grid--aside) { grid-template-columns: 1fr; }
	.vgaa-grid.vgaa-grid--4, .vgaa-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-block-group.is-style-drei-karten { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.wp-block-group.is-style-drei-karten > *, .wp-block-group.is-style-drei-karten > :nth-child(3) { grid-column: auto; }
	.site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }

	.wp-block-media-text.is-style-zeile { grid-template-columns: 100% !important; row-gap: var(--gutter); }
	.wp-block-media-text.is-style-zeile .wp-block-media-text__media { grid-column: 1; grid-row: 1; }
	.wp-block-media-text.is-style-zeile .wp-block-media-text__content { grid-column: 1; grid-row: 2; }
}

@media (max-width: 640px) {
	:root { --header-h: 65px; }
	html body { --wp--preset--font-size--base: 16px; }
	.vgaa-grid.vgaa-grid--4, .vgaa-chips, .site-footer .footer-grid { grid-template-columns: 1fr; }
	.wp-block-media-text.is-style-person { grid-template-columns: 100% !important; row-gap: 24px; }
	.wp-block-media-text.is-style-person .wp-block-media-text__media { grid-column: 1; grid-row: 1; max-width: 320px; }
	.wp-block-media-text.is-style-person .wp-block-media-text__content { grid-column: 1; grid-row: 2; }
	.wp-block-buttons:not(.vgaa-header-cta):not(.footer-cta) > .wp-block-button { width: 100%; }
	.wp-block-buttons:not(.vgaa-header-cta):not(.footer-cta) .wp-block-button__link { width: 100%; }
	.wp-block-buttons { gap: 12px; }

	.site-header__inner { gap: 10px; padding: 12px 0; }
	.vgaa-logo { padding-left: 48px; min-height: 36px; }
	.vgaa-logo::before { width: 40px; height: 36px; }
	.vgaa-logo .vgaa-logo__name { font-size: .98rem; }
	.vgaa-logo .vgaa-logo__tag { display: none; }
	.header-actions { gap: 8px; }
	.vgaa-header-cta .wp-block-button__link { padding: 10px 13px; font-size: .84rem; }

	.wp-block-cover.is-style-hero { padding: 0 var(--wp--style--root--padding-right) 40px var(--wp--style--root--padding-left); }
	.wp-block-cover.is-style-hero.hero--photo .wp-block-cover__image-background { object-position: 68% 50% !important; }
	.wp-block-group.is-style-panel { padding: 32px 26px 38px; }
	.wp-block-media-text.is-style-zeile .wp-block-media-text__media img { min-height: 200px; }
}

@media (max-width: 380px) {
	.vgaa-logo .vgaa-logo__name { font-size: .88rem; }
	.vgaa-header-cta .wp-block-button__link { padding: 9px 10px; font-size: .78rem; }
}

/* ---------- 18. Antragsformular ------------------------------------------ */
.vgaa-grid.vgaa-grid--formular { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); align-items: start; }
.vgaa-grid--formular > .wp-block-group:first-child { position: sticky; top: calc(var(--header-h) + 32px); }

.vgaa-antrag { scroll-margin-top: calc(var(--header-h) + 24px); }
.vgaa-form.vgaa-antrag__form { max-width: none; gap: 52px; }
.vgaa-antrag [hidden] { display: none !important; }
.vgaa-antrag fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.vgaa-antrag legend {
	font-family: var(--font-display); font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem); line-height: 1.2;
	color: var(--ink); padding: 0; margin-bottom: 22px;
}
.vgaa-antrag legend .vgaa-pflicht { vertical-align: middle; }
.vgaa-antrag__felder { display: grid; gap: 22px; }
.vgaa-antrag__zeile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.vgaa-antrag__zeile--plz { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); }
.vgaa-antrag .field { gap: 8px; }
.vgaa-antrag p.vgaa-antrag__hilfe { font-size: .9rem; line-height: 1.5; color: var(--body); margin: 0; max-width: 60ch; }
.vgaa-antrag__untertitel { font-family: var(--font-ui); font-weight: 600; font-size: 1.02rem; color: var(--ink); margin: 6px 0 -6px; }
.vgaa-pflicht {
	font-family: var(--font-ui); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--clay-deep); margin-left: .45em; white-space: nowrap;
}
.vgaa-form :is(input, select, textarea):user-invalid { border-color: var(--clay-deep); }
.vgaa-form select { appearance: auto; min-height: 50px; }

/* Auswahl als Klickflächen */
.vgaa-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vgaa-form .vgaa-wahl__option {
	position: relative; display: grid; gap: 4px; align-content: start; cursor: pointer;
	padding: 18px 20px 18px 58px; background: var(--paper); border: 2px solid var(--cream-deep);
	font-family: var(--font-body); font-weight: 400; transition: border-color 150ms ease, box-shadow 150ms ease;
}
.vgaa-form .vgaa-wahl__option:hover { border-color: var(--sand); }
.vgaa-form .vgaa-wahl__option:has(input:checked) { border-color: var(--sage); box-shadow: inset 0 0 0 1px var(--sage); }
.vgaa-form .vgaa-wahl__option:has(input:focus-visible) { outline: 3px solid var(--clay-deep); outline-offset: 3px; }
.vgaa-form :is(input[type="radio"], input[type="checkbox"]) {
	width: 22px; height: 22px; padding: 0; margin: 0; border: 0; background: none; accent-color: var(--sage); cursor: pointer;
}
.vgaa-wahl__option input[type="radio"] { position: absolute; left: 20px; top: 19px; }
.vgaa-wahl__option input[type="radio"]:focus-visible { outline: none; }
.vgaa-wahl__titel { font-family: var(--font-ui); font-weight: 600; font-size: 1.02rem; letter-spacing: -.01em; color: var(--ink); }
.vgaa-wahl__text { font-size: .9rem; line-height: 1.45; color: var(--body); }

/* Unterlagen */
.vgaa-antrag__hinweis { background: var(--paper); border-left: 4px solid var(--sage); padding: 18px 22px; }
.vgaa-antrag__hinweis p { margin: 0; font-size: .98rem; }
.vgaa-antrag__hinweis strong { color: var(--ink); }
.vgaa-datei { padding: 18px 20px; background: var(--paper); border: 1px dashed var(--sand); }
.vgaa-form .vgaa-datei input[type="file"] { padding: 6px 0 0; border: 0; background: transparent; font-size: .92rem; color: var(--body); }
.vgaa-datei input[type="file"]::file-selector-button {
	font: 600 .92rem/1 var(--font-ui); color: var(--ink); background: var(--cream);
	border: 2px solid var(--sage); padding: 12px 18px; margin-right: 14px; cursor: pointer; transition: background 150ms ease, color 150ms ease;
}
.vgaa-datei input[type="file"]::file-selector-button:hover { background: var(--sage); color: var(--on-color); }

/* Abschluss */
.vgaa-antrag__abschluss { display: grid; gap: 26px; }
.vgaa-form .vgaa-einwilligung {
	display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start;
	font-family: var(--font-body); font-weight: 400; font-size: .98rem; line-height: 1.55; color: var(--body); letter-spacing: 0;
}
.vgaa-einwilligung input { margin-top: 2px; }
.vgaa-antrag__senden { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.vgaa-form.vgaa-antrag__form button[type="submit"][disabled] { opacity: .7; cursor: progress; background: var(--sage); }

/* Meldungen nach dem Absenden */
.vgaa-antrag__meldung { background: var(--paper); border-left: 4px solid var(--sage); padding: 28px 32px; margin-bottom: 40px; }
.vgaa-antrag__meldung:focus { outline: none; }
.vgaa-antrag__meldung--fehler { border-left-color: var(--clay-deep); }
.vgaa-antrag__meldung h3 { font-family: var(--font-ui); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; margin: 0 0 .6em; color: var(--ink); }
.vgaa-antrag__meldung p { margin: 0 0 .8em; }
.vgaa-antrag__meldung p:last-child { margin-bottom: 0; }

/* Spamschutz-Feld für Menschen unsichtbar */
.vgaa-antrag__falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 980px) {
	.vgaa-grid.vgaa-grid--formular { grid-template-columns: 1fr; }
	.vgaa-grid--formular > .wp-block-group:first-child { position: static; }
}
@media (max-width: 640px) {
	.vgaa-wahl, .vgaa-antrag__zeile { grid-template-columns: 1fr; }
	.vgaa-antrag__zeile--plz { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr); }
	.vgaa-form.vgaa-antrag__form { gap: 44px; }
	.vgaa-antrag__meldung { padding: 22px 22px; }
}

/* Downloads in der Seitenleiste des Antragsformulars */
p.vgaa-downloads-titel { font-family: var(--font-ui); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--body); margin: 22px 0 8px !important; }
ul.vgaa-downloads { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
ul.vgaa-downloads li { position: relative; margin: 0; padding-left: 30px; font-size: .95rem; line-height: 1.4; }
ul.vgaa-downloads li::before {
	content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: var(--sage);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 4.5 5-4.5M5 19.5h14'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10.5l5 4.5 5-4.5M5 19.5h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
ul.vgaa-downloads a { font-family: var(--font-ui); font-weight: 600; color: var(--clay-deep); }

/* ---------- 19. Kontaktformular (Contact Form 7) ------------------------- */
.vgaa-kontaktformular .wpcf7-form-control-wrap { display: block; }
.vgaa-kontaktformular .vgaa-form { max-width: none; }
.vgaa-kontaktformular p.vgaa-kontaktformular__hinweis { font-size: .9rem; line-height: 1.5; color: var(--body); margin: 0; }
.vgaa-form input[type="submit"].wp-element-button {
	width: auto; cursor: pointer; border: 0; border-radius: 0;
	background: var(--sage); color: var(--cream);
	font: 700 1.02rem/1.2 var(--font-body); letter-spacing: -.005em; padding: 14px 28px;
}
.vgaa-form input[type="submit"].wp-element-button:hover { background: var(--sage-deep); }
.vgaa-form input[type="submit"].wp-element-button:focus-visible { outline: 3px solid var(--clay-deep); outline-offset: 3px; }
.vgaa-form .wpcf7-not-valid { border-color: var(--clay-deep); }
.vgaa-kontaktformular .wpcf7-not-valid-tip { color: var(--clay-deep); font-family: var(--font-ui); font-size: .88rem; font-weight: 500; margin-top: 6px; }
.vgaa-kontaktformular .wpcf7 form .wpcf7-response-output {
	margin: 26px 0 0; padding: 16px 20px; border: 0; border-left: 4px solid var(--sage);
	background: var(--paper); color: var(--ink); font-size: .95rem;
}
.vgaa-kontaktformular .wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output { border-left-color: var(--clay-deep); }
.vgaa-kontaktformular .wpcf7-spinner { margin: 0 0 0 14px; vertical-align: middle; }

/* ---------- 20. Spendenfenster (RaiseNow) -------------------------------- */
.vgaa-spendenfenster {
	width: min(92vw, 680px); max-width: none; max-height: min(90vh, 900px);
	padding: 0; border: 0; border-radius: 4px; background: var(--paper); color: var(--body);
	box-shadow: 0 24px 60px rgba(59, 54, 48, .28);
}
.vgaa-spendenfenster::backdrop { background: rgba(59, 54, 48, .55); }
.vgaa-spendenfenster__kopf {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 20px 20px 18px 28px; border-bottom: 1px solid var(--cream-deep);
}
.vgaa-spendenfenster__kopf h2 {
	font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -.024em;
	color: var(--ink); margin: 0;
}
.vgaa-spendenfenster__zu {
	flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
	background: none; color: var(--body); font: 400 1.7rem/1 var(--font-body); cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}
.vgaa-spendenfenster__zu:hover { background: var(--cream); color: var(--ink); }
.vgaa-spendenfenster__zu:focus-visible { outline: 3px solid var(--clay-deep); outline-offset: 2px; }
.vgaa-spendenfenster__inhalt { padding: 26px 28px 32px; overflow-y: auto; }
.vgaa-spendenfenster__inhalt > div:first-child { width: 100%; max-width: 580px; margin-inline: auto; }
.vgaa-spendenfenster__hinweis {
	font-family: var(--font-ui); font-size: .95rem; color: var(--body); text-align: center; margin: 16px 0 0;
}

@media (max-width: 640px) {
	.vgaa-spendenfenster { width: 100vw; max-width: none; height: 100dvh; max-height: none; border-radius: 0; }
	.vgaa-spendenfenster__kopf { padding: 16px 12px 14px 20px; }
	.vgaa-spendenfenster__inhalt { padding: 20px 18px 28px; max-height: calc(100dvh - 78px); }
}