/* ──────────────────────────────────────────────────────────────
   gbz-site — inner-page design layer.
   Loaded AFTER the v1 stylesheet (gbz-site-v1). Three jobs:

   1. Inner-page body/background — no WebGL canvas here, so the
      static fallback gradient from v1's .no-webgl rule applies.
   2. Shared classes used by the Bricks templates in
      doc/pages/templates/ (their own .css files stay empty):
      .gbz-hero, .gbz-prose, .gbz-card / .gbz-cards-grid /
      .gbz-pagination, .gbz-arch-* (archive anatomy), .gbz-cta,
      .gbz-entry-* (single post and
      projekt anatomy), .gbz-lightbox, .gbz-page,
      .gbz-404-*.
   3. Reveal states for [data-reveal] / [data-split] driven by
      site.js (fade-in via IntersectionObserver; v1's main.css
      hides [data-reveal] as soon as html.js is set).
   ────────────────────────────────────────────────────────────── */

/* ── spacing tokens ─────────────────────────────────────────── */

/* v1's main.css has no section-spacing variables, so the inner pages
   keep their own rhythm token here. */
:root {
	--gbz-section-gap: clamp(4rem, 10vw, 8rem);
}

/* ── body & background ──────────────────────────────────────── */

/* Inner pages have no WebGL canvas for depth — same fallback as
   v1's ".no-webgl body" rule. */
body:not(.home) {
	background: radial-gradient(80% 60% at 70% 20%, #0b2238, var(--bg));
}

/* Same-page anchors must clear the fixed header. */
html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 12px);
}

/* Menu open: lock body scroll. (The front page stops Lenis; inner
   pages have no smooth-scroll library, so plain overflow does it.) */
html.menu-open,
html.menu-open body {
	overflow: hidden;
}

/* ── JS reveals ([data-reveal] / [data-split]) ──────────────── */

/* site.js adds .gbz-reveal (initial hidden state) and .is-revealed
   once the element enters the viewport. Without JS or with
   prefers-reduced-motion nothing stays invisible. */
/* .js is set on <html>, so it must come before body in the selector;
   these rules also have to outrank v1's `.js [data-reveal]` hide rule. */
.js body:not(.home) .gbz-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.js body:not(.home) .gbz-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

/* Split headings slide their masked words up (same .split-line
   structure v1's ui/split.js produces). */
.js body:not(.home) .gbz-reveal .split-line > span {
	transform: translateY(115%) rotate(4deg);
	transition: transform 1.1s var(--ease);
}

.js body:not(.home) .gbz-reveal.is-revealed .split-line > span {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.js body:not(.home) .gbz-reveal,
	.js body:not(.home) .gbz-reveal .split-line > span {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ── .gbz-tilt — CSS-3D pointer tilt (shared) ───────────────── */

/* The element owns the 3D space; site.js writes the custom properties
   from the pointer position and toggles .is-tilting. Without JS the
   vars stay at 0, so the element never rotates and nothing is hidden.
   Depth layers are page-level: give a child
   `transform: translateZ(40px)` to float it above the surface. */

.gbz-tilt {
	--tilt-rx: 0deg;
	--tilt-ry: 0deg;
	--tilt-mx: 50%;
	--tilt-my: 50%;
	position: relative;
	transform-style: preserve-3d;
	transform: perspective(900px) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry));
	transition: transform 0.6s var(--ease), border-color 0.4s var(--ease);
	will-change: transform;
}

/* While the pointer moves the surface follows closely; on leave the
   slower default transition eases it back to rest. */
.gbz-tilt.is-tilting {
	transition: transform 0.15s var(--ease), border-color 0.4s var(--ease);
}

/* Highlight that follows the pointer. Sits below the raised text layers
   (they carry a larger translateZ), so it only lights the surface. */
.gbz-tilt__glare {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		circle at var(--tilt-mx) var(--tilt-my),
		rgba(255, 255, 255, 0.22),
		rgba(255, 255, 255, 0) 60%
	);
	transform: translateZ(1px);
	transition: opacity 0.4s var(--ease);
}

.gbz-tilt:hover .gbz-tilt__glare,
.gbz-tilt:focus-within .gbz-tilt__glare {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.gbz-tilt {
		transform: none;
		transition: none;
	}
}

/* ── .gbz-hero — shared page hero (owned by T3-A) ───────────── */

/* Top padding clears the fixed header; v1's .section provides the
   horizontal gutter. */
.gbz-hero {
	padding-top: calc(var(--header-h) + clamp(2.5rem, 8vh, 5.5rem));
	padding-bottom: clamp(2.5rem, 7vh, 4.5rem);
}

/* Single post/projekt hero lead: never wider than a comfortable measure. */
.gbz-hero .lead {
	max-width: 60ch;
}

/* Dynamic tags can render empty (e.g. category or archive
   description missing) — collapse the leftovers including the
   eyebrow dot. */
.gbz-hero .eyebrow:empty,
.gbz-hero .lead:empty {
	display: none;
}

/* ── .gbz-prose — long-form WordPress content ───────────────── */

.gbz-prose {
	max-width: 72ch;
}

.gbz-prose > :first-child {
	margin-top: 0;
}

.gbz-prose > :last-child {
	margin-bottom: 0;
}

.gbz-prose h1,
.gbz-prose h2 {
	font-size: clamp(1.9rem, 3.4vw, 3rem);
	line-height: 1.05;
	letter-spacing: -0.035em;
	font-weight: 450;
	margin: 2.2em 0 0.7em;
}

.gbz-prose h3 {
	font-size: clamp(1.45rem, 2.4vw, 2rem);
	line-height: 1.1;
	letter-spacing: -0.03em;
	font-weight: 500;
	margin: 1.9em 0 0.6em;
}

.gbz-prose h4,
.gbz-prose h5,
.gbz-prose h6 {
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	font-weight: 500;
	margin: 1.6em 0 0.5em;
}

.gbz-prose strong {
	font-weight: 600;
	color: var(--ink);
}

/* Links in v1 green. */
.gbz-prose a {
	color: var(--green);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.3s;
}

.gbz-prose a:hover {
	color: #8ef09a;
}

/* Lists (incl. nested). */
.gbz-prose ul,
.gbz-prose ol {
	margin: 1em 0;
	padding-left: 1.5em;
}

.gbz-prose li {
	margin: 0.35em 0;
}

.gbz-prose li::marker {
	color: var(--ink-3);
}

.gbz-prose ul ul,
.gbz-prose ol ol,
.gbz-prose ul ol,
.gbz-prose ol ul {
	margin: 0.35em 0;
}

/* Migrated posts carry inline font-size / font-weight on some paragraphs
   (they read as random bold blocks). `!important` is required because an
   inline style otherwise always beats a stylesheet rule. */
.gbz-prose p[style*="font-size"] {
	font-size: clamp(1.15rem, 1.6vw, 1.45rem) !important;
	font-weight: 450 !important;
	font-style: normal !important;
	line-height: 1.35;
	letter-spacing: -0.015em;
	color: var(--ink);
}

/* Images & figures: rounded like v1 cards. `!important` beats the inline
   border-radius that migrated content still carries. */
.gbz-prose figure {
	margin: 2rem 0;
}

.gbz-prose img {
	border-radius: 14px !important;
}

.gbz-prose .wp-block-image img {
	border-radius: var(--radius) !important;
}

.gbz-prose figcaption,
.gbz-prose .wp-element-caption {
	margin-top: 0.7rem;
	font-size: 0.85rem;
	color: var(--ink-3);
	text-align: center;
}

.gbz-prose .wp-block-image {
	margin: 2rem 0;
}

/* Bricks' frontend layer sets `margin-block: 1em` on `.wp-block-image` with a
   6-class `:not(...)` selector (0,6,0), which outranks this 2-class rule.
   Standalone images are direct children of the prose wrapper, so scope the
   `!important` block margin there and leave gallery tiles at 0. */
.gbz-prose > .wp-block-image {
	margin-block: 2rem !important;
}

/* The core lightbox script is not loaded on the front end, so its dead
   trigger (an icon rendered as "::" under every image) is hidden. Our own
   lightbox (site.js) replaces it. */
.gbz-prose .lightbox-trigger {
	display: none;
}

/* Blockquote. */
.gbz-prose blockquote {
	margin: 1.8em 0;
	padding: 0.2rem 0 0.2rem 1.4rem;
	border-left: 2px solid var(--green);
	color: var(--ink-2);
	font-size: 1.05em;
}

.gbz-prose blockquote p {
	margin: 0.6em 0;
}

.gbz-prose blockquote cite {
	display: block;
	margin-top: 0.6rem;
	font-style: normal;
	font-family: var(--f-mono);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* Tables. */
.gbz-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	margin: 1.8em 0;
}

.gbz-prose th,
.gbz-prose td {
	padding: 0.7rem 0.8rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.gbz-prose th {
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 500;
}

.gbz-prose .wp-block-table {
	margin: 1.8em 0;
	overflow-x: auto;
}

.gbz-prose .wp-block-table table {
	margin: 0;
}

/* hr, code, pre. */
.gbz-prose hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2.5em auto;
}

.gbz-prose code {
	font-family: var(--f-mono);
	font-size: 0.9em;
	background: rgba(234, 241, 239, 0.07);
	border-radius: 6px;
	padding: 0.15em 0.4em;
}

.gbz-prose pre {
	font-family: var(--f-mono);
	font-size: 0.9rem;
	background: var(--bg-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.2rem 1.4rem;
	overflow-x: auto;
}

.gbz-prose pre code {
	background: none;
	padding: 0;
}

/* Galleries: migrated content stores ONE gallery per image, so site.js folds
   adjacent galleries into one run first. Every figure is a fixed-aspect tile
   (portrait and landscape photos share the same height) and opens the
   lightbox. */
.gbz-prose .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	list-style: none;
	padding: 0;
	margin: 2.2rem 0;
}

.gbz-prose .wp-block-gallery figure {
	margin: 0;
}

.gbz-prose .wp-block-gallery .wp-block-image {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 14px;
	border: 1px solid var(--line);
	background: var(--bg-2);
	cursor: zoom-in;
}

.gbz-prose .wp-block-gallery .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px !important;
	filter: saturate(0.9);
	transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}

.gbz-prose .wp-block-gallery .wp-block-image:hover img {
	transform: scale(1.05);
	filter: saturate(1.1);
}

/* Migrated tiles carry both `wp-block-gallery` and `wp-block-image` classes,
   so the standalone `.wp-block-image { margin: 2rem 0 }` rule was adding a
   large vertical gap between rows on top of the grid gap.
   `!important` beats Bricks' 6-class `.wp-block-image:not(...)` margin-block
   rule (0,6,0), which outranks this selector (0,3,1). */
.gbz-prose .wp-block-gallery > figure.wp-block-image {
	margin: 0 !important;
}

/* A gallery with a single image is a feature image, not a tile: full width
   and a wider crop. */
.gbz-prose .wp-block-gallery:has(> figure:only-child) {
	grid-template-columns: 1fr;
}

.gbz-prose .wp-block-gallery:has(> figure:only-child) .wp-block-image {
	aspect-ratio: 16 / 10;
}

/* Captions sit inside the tile over a bottom gradient. */
.gbz-prose .wp-block-gallery .wp-block-image figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 1.8rem 0.8rem 0.7rem;
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.04em;
	color: var(--ink-2);
	text-align: left;
	background: linear-gradient(0deg, rgba(4, 7, 13, 0.85), rgba(4, 7, 13, 0));
	pointer-events: none;
}

.gbz-prose .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 1.8em 0;
}

.gbz-prose .wp-block-column {
	flex: 1 1 240px;
	min-width: 0;
}

.gbz-prose .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.6em 0;
}

/* Core buttons in v1 button style. */
.gbz-prose .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	height: 54px;
	padding: 0 1.6rem;
	border-radius: 999px;
	background: var(--green);
	color: #031208;
	font-weight: 500;
	font-size: 0.98rem;
	text-decoration: none;
	transition: background-color 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.gbz-prose .wp-block-button__link:hover {
	background: #8ef09a;
	color: #031208;
}

.gbz-prose .wp-block-button.is-style-outline .wp-block-button__link {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid var(--line);
	color: var(--ink);
}

.gbz-prose .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--ink-2);
	color: var(--ink);
}

.gbz-prose .wp-block-embed {
	margin: 2rem 0;
}

.gbz-prose iframe,
.gbz-prose video,
.gbz-prose embed,
.gbz-prose object {
	max-width: 100%;
}

.gbz-prose .wp-block-embed.is-type-video .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.gbz-prose .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: var(--radius);
}

.gbz-prose video {
	display: block;
	width: 100%;
	border-radius: var(--radius);
}

/* Empty featured images must not leave broken-img boxes. */
.gbz-prose img[src=""],
.gbz-card__media img[src=""] {
	display: none;
}

/* Migrated single-post content uses three small helpers: a mono place line
   under an entry heading, a label/value fact list (event and bank data) and
   the funder logo plate. Defined once here, used by post and projekt. */

.gbz-prose .gbz-place {
	display: flex;
	align-items: center;
	gap: 0.7em;
	margin: -0.4em 0 1.4em;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* Same green dot as .eyebrow (v1 main.css), so the line reads as a label. */
.gbz-prose .gbz-place::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 12px var(--green);
}

.gbz-prose .gbz-facts {
	display: grid;
	margin: 1.6em 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.gbz-prose .gbz-facts li {
	/* Each row has exactly two children: the label span and one value span,
	   so the two columns stay aligned even when the value wraps. */
	display: grid;
	/* Fixed width so the columns line up across every row of one list;
	   11.5rem fits "VERANSTALTUNGSORT" / "VERWENDUNGSZWECK" at 0.7rem mono. */
	grid-template-columns: 11.5rem 1fr;
	gap: 1rem;
	margin: 0;
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
}

/* The generic .gbz-prose li marker / list padding above must not apply. */
.gbz-prose .gbz-facts li::marker {
	content: none;
}

.gbz-prose .gbz-facts__label {
	padding-top: 0.2em;
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
	/* base.css sets hyphens: auto, which broke long labels inside the word. */
	hyphens: none;
	overflow-wrap: normal;
	word-break: normal;
}

@media (max-width: 479px) {
	.gbz-prose .gbz-facts li {
		grid-template-columns: 1fr;
		gap: 0.3rem;
	}

	.gbz-prose .gbz-facts__label {
		padding-top: 0;
	}
}

/* Funder / partner logos are dark on transparent and would vanish on the
   dark page. A small light plate is the one allowed exception to the
   "no light surfaces" rule; it stays inline with the prose column. */
.gbz-prose .gbz-funder {
	max-width: 26rem;
}

.gbz-prose .gbz-funder img {
	height: auto;
	padding: 1rem 1.4rem;
	background: var(--ink);
	border-radius: 14px !important;
}

/* ── .gbz-card — post card for archive loops ────────────────── */

.gbz-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--glass);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	color: inherit;
	transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
}

.gbz-card:hover {
	border-color: var(--ink-3);
	transform: translateY(-4px);
}

.gbz-card:focus-within {
	border-color: var(--green);
}

.gbz-card__media {
	margin: 0;
	aspect-ratio: 16 / 10;
	background-color: #04070d;
	overflow: hidden;
	/* Fallback for cards without a featured image: a dark v1 gradient
	   with the GBZ mark faded behind a soft blue glow. A featured image
	   covers it; while a lazy image loads the gradient stays visible. */
	background-image:
		linear-gradient(155deg, rgba(8, 20, 33, 0.55), rgba(4, 7, 13, 0.9)),
		radial-gradient(75% 85% at 26% 18%, rgba(61, 155, 255, 0.18), transparent 65%),
		url("logo-mark.webp");
	background-repeat: no-repeat;
	background-size: cover, cover, 46% auto;
	background-position: center, center, 50% 52%;
}

/* Bricks clears background-image on lazy elements until their image has
   loaded. Bricks' rules live in @layer bricks, where !important wins over
   unlayered !important, so this override goes into the same layer. Keep the
   fallback visible: a card never shows an empty black box while waiting. */
@layer bricks {
	.gbz-card .gbz-card__media.bricks-lazy-hidden {
		background-image:
			linear-gradient(155deg, rgba(8, 20, 33, 0.55), rgba(4, 7, 13, 0.9)),
			radial-gradient(75% 85% at 26% 18%, rgba(61, 155, 255, 0.18), transparent 65%),
			url("logo-mark.webp") !important;
	}
}

.gbz-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9);
	transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}

.gbz-card:hover .gbz-card__media img {
	transform: scale(1.05);
	filter: saturate(1.1);
}

.gbz-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.4rem 1.5rem 1.6rem;
	flex: 1;
}

.gbz-card .eyebrow {
	margin: 0;
	font-size: 0.68rem;
}

.gbz-card__title {
	margin: 0;
	font-size: clamp(1.3rem, 1.8vw, 1.7rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

.gbz-card__excerpt {
	margin: 0;
	color: var(--ink-2);
	font-size: 0.95rem;
	/* Keep every card the same height: three lines max, on every loop. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

.gbz-card__meta {
	margin: 0;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-3);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}

.gbz-card__more {
	margin-top: auto;
	align-self: flex-start;
}

/* Whole card clickable: stretched overlay link, first child of the
   card. The visible label stays screen-reader only. */
.gbz-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.gbz-card__link-label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── archive loop grid + pagination ─────────────────────────── */

.gbz-cards-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.gbz-pagination {
	margin-top: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--f-mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
}

.gbz-pagination:empty {
	display: none;
}

.gbz-pagination a,
.gbz-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink-2);
}

.gbz-pagination a:hover {
	color: var(--ink);
	border-color: var(--ink-2);
}

.gbz-pagination .current {
	background: var(--green);
	border-color: var(--green);
	color: #031208;
}

/* ── .gbz-entry-* — single post / projekt anatomy ───────────── */
/* One shared anatomy for /projekte/<slug>/ and /aktuelles/<slug>/:
   hero + meta stat row, media frame, sticky aside + prose, more loop. */

.gbz-entry-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 1.2rem 2rem;
	max-width: 62rem;
	margin-top: clamp(2rem, 5vw, 3.5rem);
	padding-top: 1.2rem;
	border-top: 1px solid var(--line);
}

.gbz-entry-meta__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

/* A dynamic tag can render nothing: an empty value collapses its item. */
.gbz-entry-meta__item:has(.gbz-entry-meta__value:empty) {
	display: none;
}

/* The reading-time item only exists once site.js has written a value. */
html:not(.js) .gbz-entry-meta__item--js {
	display: none;
}

.gbz-entry-meta__label {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gbz-entry-meta__value {
	font-family: var(--f-sans);
	font-size: clamp(1rem, 1.2vw, 1.15rem);
	font-weight: 400;
	color: var(--ink);
}

.gbz-entry-meta__value a {
	color: var(--green);
	text-decoration: none;
	transition: color 0.3s;
}

.gbz-entry-meta__value a:hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Media frame: `contain` keeps posters and flyers with text readable; the
   blurred JS backdrop fills the empty sides, the vignette softens the edges. */
.gbz-entry-media {
	padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.gbz-entry-frame {
	position: relative;
	margin: 0;
	width: 100%;
	max-width: 84rem;
	aspect-ratio: 16 / 9;
	max-height: 78vh;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	overflow: hidden;
	background: var(--bg-2);
}

.gbz-entry-frame__img {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: saturate(0.95);
}

.gbz-entry-frame__bg {
	position: absolute;
	inset: -8%;
	z-index: 0;
	width: 116%;
	height: 116%;
	max-width: none;
	object-fit: cover;
	filter: blur(40px) saturate(1.2);
	opacity: 0.55;
}

.gbz-entry-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 35%, rgba(4, 7, 13, 0.55) 100%);
}

/* No featured image: drop the whole media section (Bricks renders src=""). */
.gbz-entry-media:has(img[src=""]),
.gbz-entry-media:not(:has(img)) {
	display: none;
}

.gbz-entry-body {
	display: grid;
	grid-template-columns: minmax(14rem, 19rem) minmax(0, 1fr);
	column-gap: clamp(2rem, 6vw, 6rem);
	align-items: start;
	max-width: 84rem;
	padding-bottom: var(--gbz-section-gap);
}

/* The aside is a stack of hairline blocks: back link, table of contents,
   share row and the closing help card. It scrolls on its own when the
   viewport is shorter than the stack. */
.gbz-entry-aside {
	position: sticky;
	top: calc(var(--header-h) + 2rem);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	max-height: calc(100vh - var(--header-h) - 3rem);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
	overscroll-behavior: contain;
}

.gbz-entry-aside > * {
	flex: 0 0 auto;
	width: 100%;
	padding: 1.4rem 0;
	border-top: 1px solid var(--line);
}

.gbz-entry-aside > .gbz-entry-back {
	align-self: flex-start;
	width: auto;
	padding-top: 0;
	border-top: 0;
}

/* Table of contents: 1px rail with a green→blue fill driven by
   --toc-progress (site.js), plus a glowing dot on the active item. */
.gbz-entry-toc {
	position: relative;
	padding-left: calc(1rem + 2px);
}

.gbz-entry-toc[hidden] {
	display: none;
}

.gbz-entry-toc__rail {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 2px;
	width: 1px;
	background: var(--line);
	pointer-events: none;
}

.gbz-entry-toc__rail::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, var(--green), var(--teal), var(--blue));
	transform: scaleY(var(--toc-progress, 0));
	transform-origin: top;
	transition: transform 0.3s var(--ease);
}

.gbz-entry-toc__list {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0.8rem 0 0;
	padding: 0;
	list-style: none;
}

.gbz-entry-toc__link {
	position: relative;
	display: grid;
	grid-template-columns: 2.2rem 1fr;
	align-items: baseline;
	padding: 0.35rem 0;
	font-size: 0.92rem;
	line-height: 1.35;
	color: var(--ink-2);
	text-decoration: none;
	transition: color 0.3s var(--ease);
}

.gbz-entry-toc__link:hover {
	color: var(--ink);
}

.gbz-entry-toc__link--sub {
	grid-template-columns: 1fr;
	padding-left: 2.2rem;
	font-size: 0.85rem;
}

.gbz-entry-toc__num {
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	color: var(--ink-3);
	transition: color 0.3s var(--ease);
}

.gbz-entry-toc__text {
	min-width: 0;
}

.gbz-entry-toc__link.is-active {
	color: var(--ink);
}

.gbz-entry-toc__link.is-active .gbz-entry-toc__num {
	color: var(--green);
}

.gbz-entry-toc__link.is-active::before {
	content: "";
	position: absolute;
	top: 0.55rem;
	left: calc(-1rem - 2px);
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 10px var(--green);
	pointer-events: none;
}

.gbz-entry-toc__link:focus-visible,
.gbz-entry-share__link:focus-visible,
.gbz-entry-back:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 4px;
}

.gbz-entry-share {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
}

.gbz-entry-share__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gbz-entry-share__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 42px;
	padding: 0 1rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--f-mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-2);
	text-decoration: none;
	transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}

.gbz-entry-share__link:hover {
	border-color: var(--ink-3);
	color: var(--ink);
}

/* The TOC list and the share anchors are filled by site.js; without JS
   they would stay empty / point at "#", so hide them. */
html:not(.js) .gbz-entry-toc,
html:not(.js) .gbz-entry-share__link {
	display: none;
}

.gbz-entry-prose {
	max-width: 68ch;
}

.gbz-entry-prose h2,
.gbz-entry-prose h3 {
	scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.gbz-entry-help {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	width: 100%;
	margin-top: 1.4rem;
	padding: 1.4rem;
}

/* Mobile reading progress: only below the desktop grid, and only with JS. */
.gbz-entry-progress {
	display: none;
}

.gbz-entry-help p {
	margin: 0;
	color: var(--ink-2);
	font-size: 0.95rem;
}

.gbz-entry-help .link-arrow {
	margin-top: 0.2rem;
}

/* More loop: section head left, archive link right. */
.gbz-entry-more {
	padding-bottom: 0;
}

.gbz-entry-more__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 2rem;
	margin-bottom: 2rem;
}

.gbz-entry-more__head > div {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	max-width: 44rem;
}

.gbz-entry-more__head .eyebrow,
.gbz-entry-more__head .lead {
	margin: 0;
}

.gbz-entry-more__head h2 {
	margin: 0;
}

/* 768–1080px the cards grid drops to 2 columns, so a 3-card "more" loop
   would leave the third card alone on its row. Hide it in that range only. */
@media (min-width: 768px) and (max-width: 1080px) {
	.gbz-entry-more .gbz-cards-grid > :nth-child(3) {
		display: none;
	}
}

/* ── generic page layout ────────────────────────────────────── */

.gbz-page {
	padding-bottom: clamp(3rem, 8vh, 6rem);
}

/* ── CTA strip (single post) & 404 actions ──────────────────── */

.gbz-cta {
	padding-top: clamp(2rem, 6vh, 4rem);
	padding-bottom: clamp(3rem, 9vh, 7rem);
}

/* A CTA that follows a grid needs a real gap: v1's .section has no
   vertical padding, so the eyebrow would sit on the grid's last row. */
.gbz-entry-more + .gbz-cta,
.gbz-spenden-sach + .gbz-spenden-cta {
	padding-top: var(--gbz-section-gap);
}

/* Mitglied: the application eyebrow sits directly under the
   "Jetzt bewerben" button on mobile - give the section a top gap. */
.gbz-mitglied-apply {
	padding-top: clamp(3rem, 8vw, 5rem);
}

.gbz-cta-actions,
.gbz-404-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 2.2rem;
}

.gbz-404 {
	padding-bottom: clamp(3rem, 9vh, 7rem);
}

.gbz-404-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin-top: 2.2rem;
}

/* Business address is a RichText value with line breaks. */
.gbz-kontakt-info__list a[href^="http"] {
	white-space: pre-line;
}

/* ── native Bricks forms (Kontakt, Mitglied werden) ─────────── */
/* The imported card wrapper keeps .form.card; the native form element
   must not add its own padding or column gap. */
.gbz-native-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0;
}

.gbz-native-form .form-group {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.gbz-native-form .form-group > label,
.gbz-native-form .form-group > .label {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gbz-native-form .form-group > label.required::after,
.gbz-native-form .form-group > .label.required::after {
	content: none;
}

.gbz-native-form input:not([type="checkbox"]):not([type="radio"]),
.gbz-native-form textarea {
	width: 100%;
	font: inherit;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	padding: 0.6rem 0;
	resize: vertical;
	transition: border-color 0.3s;
}

.gbz-native-form input:not([type="checkbox"]):not([type="radio"]):focus,
.gbz-native-form textarea:focus {
	outline: none;
	border-color: var(--green);
}

.gbz-native-form ::placeholder {
	color: var(--ink-3);
	opacity: 1;
}

.gbz-native-form .options-wrapper {
	list-style: none;
	display: grid;
	gap: 0.55rem;
	margin: 0.3rem 0 0;
	padding: 0;
}

.gbz-native-form .options-wrapper li {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	font-size: 0.92rem;
	line-height: 1.4;
	color: var(--ink-2);
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

.gbz-native-form .options-wrapper li:hover {
	border-color: var(--ink-3);
}

.gbz-native-form .options-wrapper li:has(input:checked) {
	color: var(--ink);
	border-color: var(--green);
	background: rgba(98, 210, 111, 0.06);
}

.gbz-native-form .options-wrapper input[type="checkbox"],
.gbz-native-form .options-wrapper input[type="radio"] {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	margin: 0.1rem 0 0;
	accent-color: var(--green);
}

.gbz-native-form .options-wrapper label {
	font-size: inherit;
	letter-spacing: 0;
	text-transform: none;
	color: inherit;
	cursor: pointer;
}

.gbz-native-form .options-wrapper a {
	color: var(--ink);
	text-decoration: underline;
}

/* Step headings inside the membership form. */
.gbz-native-form .gbz-native-step {
	display: flex;
	align-items: center;
	margin: 0.4rem 0 0;
}

.gbz-native-form .gbz-native-step--plain {
	display: block;
	margin-top: 0.6rem;
}

.gbz-native-form .form-group:has(.gbz-native-step) + .form-group {
	margin-top: -0.5rem;
}

/* Submit button in v1 button style. */
.gbz-native-form .submit-button-wrapper {
	margin-top: 0.6rem;
}

.gbz-native-form .bricks-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	height: 54px;
	padding: 0 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--green);
	color: #031208;
	font: inherit;
	font-size: 0.98rem;
	font-weight: 500;
	letter-spacing: 0;
	cursor: pointer;
	transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.gbz-native-form .bricks-button:hover {
	background: #8ef09a;
	color: #031208;
}

/* ── Bricks pagination (inside .gbz-pagination) ─────────────── */

.gbz-pagination .bricks-pagination ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}

.gbz-pagination .bricks-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding: 0 0.7rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--ink-2);
	text-decoration: none;
}

.gbz-pagination .bricks-pagination a.page-numbers:hover {
	color: var(--ink);
	border-color: var(--ink-2);
}

.gbz-pagination .bricks-pagination .page-numbers.current {
	background: var(--green);
	border-color: var(--green);
	color: #031208;
}

/* ── responsive ─────────────────────────────────────────────── */


@media (max-width: 1080px) {
	.gbz-cards-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991px) {
	.gbz-entry-body {
		grid-template-columns: 1fr;
	}

	/* The aside becomes a row above the prose: back link + share row.
	   The table of contents and the help card are redundant on mobile
	   (the fixed progress bar replaces the rail), so they are hidden. */
	.gbz-entry-aside {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1.2rem 2rem;
		max-height: none;
		overflow: visible;
		margin-bottom: 2.2rem;
		padding-bottom: 1.2rem;
		border-bottom: 1px solid var(--line);
	}

	.gbz-entry-aside > * {
		width: auto;
		padding: 0;
		border-top: 0;
	}

	.gbz-entry-aside > .gbz-entry-back {
		padding-bottom: 0;
	}

	.gbz-entry-toc,
	.gbz-entry-help {
		display: none;
	}

	.gbz-entry-share {
		flex-direction: row;
		align-items: center;
		gap: 0.6rem 1rem;
		width: auto;
	}

	/* Sits above the content but below the menu overlay / header
	   (menu z-index 700, header 800 in v1 main.css). */
	.gbz-entry-progress {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		height: 2px;
		z-index: 690;
		background: linear-gradient(100deg, var(--green) 10%, var(--teal) 50%, var(--blue) 90%);
		transform: scaleX(var(--entry-progress, 0));
		transform-origin: left;
		pointer-events: none;
	}
}

html:not(.js) .gbz-entry-progress {
	display: none;
}

@media (max-width: 767px) {
	.gbz-cards-grid {
		grid-template-columns: 1fr;
	}

	.gbz-entry-frame {
		aspect-ratio: 4 / 3;
	}

	.gbz-prose .wp-block-gallery {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.gbz-native-form .options-wrapper {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.4rem;
	}

	.gbz-native-form .options-wrapper:has(> li:only-child) {
		grid-template-columns: 1fr;
	}

	/* Membership form: two columns for paired fields, full width for steps,
	   option groups, textareas and the submit button. */
	.gbz-native-form--mitglied {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.4rem;
		row-gap: 1.1rem;
	}

	.gbz-native-form--mitglied .form-group {
		width: 100% !important;
		margin: 0;
	}

	.gbz-native-form--mitglied .form-group:has(.gbz-native-step),
	.gbz-native-form--mitglied .form-group:has(.options-wrapper),
	.gbz-native-form--mitglied .form-group:has(textarea),
	.gbz-native-form--mitglied .submit-button-wrapper {
		grid-column: 1 / -1;
	}
}

@media (max-width: 479px) {
	.gbz-native-form .bricks-button {
		width: 100%;
		justify-content: center;
	}
}

/* ── GiveWP donation form (legacy template on /spenden/) ────── */
/* The form renders inline inside .card.gbz-spenden-form, so the same
   v1 tokens as the Kontakt form apply. Selectors are scoped and more
   specific than GiveWP's give.css, which keeps loading underneath for
   functional bits (loading spinner, receipt skeleton). */

.gbz-spenden-form .give-form-wrap {
	margin: 0;
}

.gbz-spenden-form .give-form {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

/* Notices (test-mode banner, validation errors, AJAX messages): dark cards
   with a colored accent bar; the GiveWP icon is pulled inside the card
   (default hangs half outside at left:-17px). Text and icon colours keep a
   contrast ratio >= 4.5 on their own background. */
.gbz-spenden-form .give_error,
.gbz-spenden-form .give_warning,
.gbz-spenden-form .give_success,
.gbz-spenden-form .give_notice {
	margin: 0;
	padding: 0.8rem 1rem 0.8rem 3.2rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--ink-3);
	border-radius: 12px;
	background: rgba(14, 24, 36, 0.6);
	box-shadow: none;
	color: var(--ink);
	font-family: var(--f-mono);
	font-size: 0.75rem;
	line-height: 1.55;
}

.gbz-spenden-form .give_error p,
.gbz-spenden-form .give_warning p,
.gbz-spenden-form .give_success p,
.gbz-spenden-form .give_notice p {
	margin: 0;
	color: inherit;
}

.gbz-spenden-form .give_error strong,
.gbz-spenden-form .give_warning strong,
.gbz-spenden-form .give_success strong {
	color: inherit;
}

.gbz-spenden-form .give_warning {
	border-left-color: #ffba00;
	background: rgba(255, 186, 0, 0.1);
}

.gbz-spenden-form .give_error {
	border-left-color: #ff8484;
	background: rgba(255, 132, 132, 0.1);
}

.gbz-spenden-form .give_success {
	border-left-color: var(--green);
	background: rgba(98, 210, 111, 0.1);
}

/* Icon circle inside the card, vertically centred. */
.gbz-spenden-form .give_error:before,
.gbz-spenden-form .give_warning:before,
.gbz-spenden-form .give_success:before,
.gbz-spenden-form .give_notice:before {
	left: 0.85rem;
	top: 50%;
	margin-top: -15px;
}

.gbz-spenden-form .give_warning:before {
	background-color: #ffba00;
}

.gbz-spenden-form .give_error:before {
	background-color: #ff8484;
}

.gbz-spenden-form .give_success:before {
	background-color: var(--green);
}

/* Amount input + currency symbol (one underline, like .field). */
.gbz-spenden-form .give-total-wrap {
	margin: 0;
}

.gbz-spenden-form .give-donation-amount {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	margin: 0;
	padding: 0.15rem 0 0.55rem;
	border-bottom: 1px solid var(--line);
	background: transparent;
}

.gbz-spenden-form form[id*=give-form] .give-donation-amount #give-amount,
.gbz-spenden-form form[id*=give-form] .give-donation-amount #give-amount-text {
	width: 9ch;
	min-width: 0;
	height: auto;
	line-height: 1.2;
	margin: 0;
	padding: 0.35rem 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--f-mono);
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ink);
	transition: border-color 0.3s;
}

.gbz-spenden-form form[id*=give-form] .give-donation-amount #give-amount:focus {
	outline: none;
}

.gbz-spenden-form form[id*=give-form] .give-donation-amount #give-amount.invalid-amount {
	border: 0;
	color: #ff8484;
}

.gbz-spenden-form form[id*=give-form] .give-donation-amount .give-currency-symbol,
.gbz-spenden-form form[id*=give-form] .give-donation-amount .give-currency-symbol.give-currency-position-before,
.gbz-spenden-form form[id*=give-form] .give-donation-amount .give-currency-symbol.give-currency-position-after {
	float: none;
	height: auto;
	line-height: inherit;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: 0;
	box-shadow: none;
	font-family: var(--f-mono);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--ink-3);
}

/* Donation level pills (10/25/50/100 € + Anderer Betrag). */
.gbz-spenden-form .give-donation-levels-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.2rem 0 0;
	padding: 0;
	list-style: none;
}

.gbz-spenden-form .give-donation-levels-wrap li {
	margin: 0;
}

.gbz-spenden-form .give-donation-level-btn {
	height: 42px;
	padding: 0 1.15rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--ink-2);
	font-family: var(--f-sans);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1;
	cursor: pointer;
	text-shadow: none;
	transition: color 0.3s, border-color 0.3s, background-color 0.3s;
}

.gbz-spenden-form .give-donation-level-btn:hover {
	color: var(--ink);
	border-color: var(--ink-3);
}

/* Selected level (GiveWP moves .give-default-level to the active pill). */
.gbz-spenden-form .give-donation-level-btn.give-default-level {
	background: var(--green);
	border-color: var(--green);
	color: #031208;
}

.gbz-spenden-form .give-donation-level-btn:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 2px;
}

.gbz-spenden-form .give-donation-level-btn.give-default-level:hover {
	color: #031208;
	border-color: var(--green);
}

/* Fieldsets: legends as eyebrow-style labels. */
.gbz-spenden-form fieldset {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.gbz-spenden-form fieldset legend {
	padding: 0;
	margin: 0 0 0.2rem;
	float: none;
	width: auto;
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

/* Donor fields: legend full width on top, then Vorname | Nachname in two
   equal columns (one column below 600px), then E-Mail full width. */
.gbz-spenden-form #give_checkout_user_info {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.1rem 1.4rem;
}

.gbz-spenden-form #give_checkout_user_info > legend {
	grid-column: 1 / -1;
}

/* GiveWP widths the name rows via form[id*=give-form] .form-row-first/-last
   (48.5% floats) — override with the same id weight. */
.gbz-spenden-form form[id*=give-form] .form-row,
.gbz-spenden-form form[id*=give-form] .form-row-first,
.gbz-spenden-form form[id*=give-form] .form-row-last,
.gbz-spenden-form form[id*=give-form] .form-row-responsive,
.gbz-spenden-form .form-row {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	width: 100%;
	float: none;
	clear: none;
}

.gbz-spenden-form .give-label {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gbz-spenden-form .give-required-indicator {
	color: var(--green);
}

/* Question-mark tooltips add clutter next to labels. */
.gbz-spenden-form .give-tooltip {
	display: none;
}

.gbz-spenden-form form[id*=give-form] .form-row input[type="text"],
.gbz-spenden-form form[id*=give-form] .form-row input[type="email"],
.gbz-spenden-form form[id*=give-form] .form-row input[type="tel"],
.gbz-spenden-form form[id*=give-form] .form-row input[type="password"],
.gbz-spenden-form form[id*=give-form] .form-row input[type="url"],
.gbz-spenden-form form[id*=give-form] .form-row select,
.gbz-spenden-form form[id*=give-form] .form-row textarea,
.gbz-spenden-form input.give-input,
.gbz-spenden-form select.give-select {
	width: 100%;
	font: inherit;
	color: var(--ink);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	padding: 0.6rem 0;
	box-shadow: none;
	outline: none;
	transition: border-color 0.3s;
}

.gbz-spenden-form form[id*=give-form] .form-row input:focus,
.gbz-spenden-form form[id*=give-form] .form-row select:focus,
.gbz-spenden-form form[id*=give-form] .form-row textarea:focus,
.gbz-spenden-form input.give-input:focus,
.gbz-spenden-form select.give-select:focus {
	outline: none;
	border-color: var(--green);
}

.gbz-spenden-form input.give-input::placeholder {
	color: var(--ink-3);
	opacity: 1;
}

/* Payment method radios (only visible with more than one gateway). */
.gbz-spenden-form .give-payment-mode-label {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gbz-spenden-form #give-gateway-radio-list {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gbz-spenden-form #give-gateway-radio-list li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 14px;
	font-size: 0.92rem;
	color: var(--ink-2);
}

.gbz-spenden-form #give-gateway-radio-list li.give-gateway-option-selected {
	border-color: var(--green);
	background: rgba(98, 210, 111, 0.06);
}

.gbz-spenden-form #give-gateway-radio-list input[type="radio"] {
	flex: none;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--green);
}

.gbz-spenden-form #give-gateway-radio-list .give-gateway-option {
	color: inherit;
	cursor: pointer;
}

/* Total + submit: one clear line — eyebrow-style label left, large amount
   right, no boxes; the green pill button aligns with the fields. GiveWP
   ships both as grey boxes via form[id*=give-form] #give-final-total-wrap …,
   so these overrides carry the same id weight. */
.gbz-spenden-form .give-donation-submit {
	gap: 1.1rem;
	align-items: stretch;
}

.gbz-spenden-form #give-final-total-wrap {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0;
}

.gbz-spenden-form form[id*=give-form] #give-final-total-wrap .give-donation-total-label,
.gbz-spenden-form form[id*=give-form] #give-final-total-wrap .give-final-total-amount {
	display: block;
	float: none;
	height: auto;
	line-height: inherit;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	border-top: 0;
	border-left: none;
	border-radius: 0;
	box-shadow: none;
	cursor: auto;
}

.gbz-spenden-form form[id*=give-form] #give-final-total-wrap .give-donation-total-label {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gbz-spenden-form form[id*=give-form] #give-final-total-wrap .give-final-total-amount {
	font-family: var(--f-mono);
	font-size: 1.25rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--ink);
}

.gbz-spenden-form .give-submit-button-wrap {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
}

.gbz-spenden-form .give-submit {
	height: 54px;
	padding: 0 1.6rem;
	border: 0;
	border-radius: 999px;
	background: var(--green);
	box-shadow: none;
	color: #031208;
	font-family: var(--f-sans);
	font-size: 0.98rem;
	font-weight: 500;
	letter-spacing: -0.01em;
	cursor: pointer;
	text-shadow: none;
	transition: background-color 0.4s var(--ease), color 0.4s var(--ease);
}

.gbz-spenden-form .give-submit:hover {
	background: #8ef09a;
	color: #031208;
}

@media (min-width: 600px) {
	.gbz-spenden-form #give_checkout_user_info {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gbz-spenden-form #give-email-wrap {
		grid-column: 1 / -1;
	}
}

@media (max-width: 479px) {
	.gbz-spenden-form .give-submit {
		width: 100%;
	}
}

/* ── GiveWP receipt + donor dashboard (.gbz-prose pages) ────── */
/* The donation confirmation receipt loads into #give-receipt via AJAX.
   GiveWP ships a light grey table with a WHITE text-shadow (that is the
   "blurred/doubled" text) and light notice boxes — restrip both to the
   dark design. Text colours keep a contrast ratio >= 4.5 on their own
   background. */

.gbz-prose #give-receipt {
	width: 100%;
}

/* Success / error / warning notices inside the receipt: dark cards with a
   colored accent bar, icon pulled inside (default hangs at left:-17px). */
.gbz-prose #give-receipt .give_notices .give_notice,
.gbz-prose #give-receipt .give_notices .give_success,
.gbz-prose #give-receipt .give_notices .give_error,
.gbz-prose #give-receipt .give_notices .give_warning {
	margin: 0 0 1.4rem;
	padding: 0.9rem 1.1rem 0.9rem 3.3rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--green);
	border-radius: 12px;
	background: rgba(14, 24, 36, 0.6);
	box-shadow: none;
	color: var(--ink);
	font-family: var(--f-mono);
	font-size: 0.78rem;
	line-height: 1.55;
}

.gbz-prose #give-receipt .give_notices .give_error {
	border-left-color: #ff8484;
}

.gbz-prose #give-receipt .give_notices .give_warning {
	border-left-color: #ffba00;
}

.gbz-prose #give-receipt .give_notices .give_notice:before,
.gbz-prose #give-receipt .give_notices .give_success:before,
.gbz-prose #give-receipt .give_notices .give_error:before,
.gbz-prose #give-receipt .give_notices .give_warning:before {
	left: 0.9rem;
	top: 50%;
	margin-top: -15px;
}

/* Receipt table: hairline rows, crisp text, medium labels + regular values. */
.gbz-prose #give-receipt table.give-table {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--line);
	border-bottom: 0;
	color: var(--ink);
	text-shadow: none;
	margin: 0;
	font-size: 0.95rem;
}

.gbz-prose #give-receipt table.give-table thead {
	font-weight: 400;
}

.gbz-prose #give-receipt table.give-table th {
	background: transparent;
	border: 0;
	padding: 0.95rem 0;
	text-align: left;
}

.gbz-prose #give-receipt table.give-table thead .give-receipt-thead-text {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gbz-prose #give-receipt table.give-table tbody tr {
	text-align: left;
}

.gbz-prose #give-receipt table.give-table tbody td {
	background: transparent;
	border: 0;
	border-top: 1px solid var(--line);
	padding: 0.95rem 0;
	text-align: left;
	color: var(--ink);
}

/* Labels (first column) in the eyebrow style, values keep regular weight. */
.gbz-prose #give-receipt table.give-table tbody td:first-child strong {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gbz-prose #give-receipt .give-donation-status {
	color: var(--ink);
}

.gbz-prose #give-receipt .donation-level-text-wrap {
	color: var(--ink-2);
}

/* Donor dashboard iframe (/spenderkonto/): full width, dark frame. */
.gbz-prose .give-donor-dashboard-wrap iframe,
.gbz-prose iframe[src*="give-embed=donor-dashboard"] {
	display: block;
	width: 100%;
	min-height: 776px;
	border: 0;
}

/* ── .gbz-icon — shared CSS-mask icon set ───────────────────── */
/* Glyphs are masks, so an icon always takes `currentColor` and no
   icon font or inline <svg> is needed in the HTML. Brand glyphs:
   Simple Icons (CC0); line icons: Lucide (ISC). Every source SVG
   is a black glyph on transparent, 24×24 viewBox. Use with a
   modifier: <span class="gbz-icon gbz-icon--instagram">. */

.gbz-icon {
	display: inline-block;
	width: 1.25em;
	height: 1.25em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--gbz-icon) center / contain no-repeat;
	mask: var(--gbz-icon) center / contain no-repeat;
}

/* Simple Icons — brand glyphs. */
.gbz-icon--instagram {
	--gbz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E");
}

.gbz-icon--facebook {
	--gbz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E");
}

.gbz-icon--tiktok {
	--gbz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
}

.gbz-icon--whatsapp {
	--gbz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E");
}

/* Lucide — line icons (stroke 2, round caps/joins). */
.gbz-icon--heart {
	--gbz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E");
}

.gbz-icon--users {
	--gbz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Cpath d='M16 3.128a4 4 0 0 1 0 7.744'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3C/svg%3E");
}

.gbz-icon--mail {
	--gbz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7'/%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3C/svg%3E");
}

.gbz-icon--phone {
	--gbz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.832 16.568a1 1 0 0 0 1.213-.303l.355-.465A2 2 0 0 1 17 15h3a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2A18 18 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 2v3a2 2 0 0 1-.8 1.6l-.468.351a1 1 0 0 0-.292 1.233 14 14 0 0 0 6.392 6.384'/%3E%3C/svg%3E");
}

.gbz-icon--map-pin {
	--gbz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

.gbz-icon--globe {
	--gbz-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
}

/* ── [data-embed] click-to-load iframe target (shared) ──────── */
/* site.js appends the iframe only after the user clicks. The target
   element itself is positioned by the page that uses it; these rules
   only make the injected iframe fill whatever box that is. */
[data-embed-target] iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* A button whose embed has loaded stays visible but inert. */
[data-embed][disabled] {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}

/* ── Kontakt map pulse rings (keyframes) ────────────────────── */
/* Used by `.gbz-kontakt-map__ring` in kontakt-uns.css. Keyframes
   cannot live in Bricks page CSS: the importer turns them into a
   code element and refuses the import. */

@keyframes gbz-kontakt-ring {
  0% {
    transform: translate(-50%, -50%) scale(0.55);
    opacity: 0;
  }
  22% {
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
  }
}

/* ── .gbz-lightbox — native dialog image viewer (site.js) ───── */
/* Built lazily by site.js from the prose images. Native <dialog> gives
   Esc-to-close, the top layer and focus handling for free. */

.gbz-lightbox {
	inset: 0;
	width: 100vw;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(4, 7, 13, 0.94);
	color: var(--ink);
	opacity: 0;
	transition: opacity 0.4s var(--ease);
}

.gbz-lightbox[open] {
	display: flex;
	opacity: 1;
}

@starting-style {
	.gbz-lightbox[open] {
		opacity: 0;
	}
}

.gbz-lightbox::backdrop {
	background: transparent;
}

.gbz-lightbox__figure {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: clamp(1rem, 4vw, 3rem);
}

.gbz-lightbox__img {
	max-width: 92vw;
	max-height: 82dvh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 14px;
}

.gbz-lightbox__count {
	position: absolute;
	left: 50%;
	bottom: 1.4rem;
	transform: translateX(-50%);
	margin: 0;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	color: var(--ink-3);
}

.gbz-lightbox__close,
.gbz-lightbox__prev,
.gbz-lightbox__next {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: var(--glass);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--ink);
	font-size: 1.1rem;
	line-height: 1;
	transition: border-color 0.3s, background-color 0.3s;
}

.gbz-lightbox__close:hover,
.gbz-lightbox__prev:hover,
.gbz-lightbox__next:hover {
	border-color: var(--ink-3);
}

.gbz-lightbox__close:focus-visible,
.gbz-lightbox__prev:focus-visible,
.gbz-lightbox__next:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 4px;
}

.gbz-lightbox__close {
	top: clamp(1rem, 3vw, 2rem);
	right: clamp(1rem, 3vw, 2rem);
}

.gbz-lightbox__prev {
	left: clamp(0.8rem, 2.5vw, 2rem);
	top: 50%;
	transform: translateY(-50%);
}

.gbz-lightbox__next {
	right: clamp(0.8rem, 2.5vw, 2rem);
	top: 50%;
	transform: translateY(-50%);
}

@media (prefers-reduced-motion: reduce) {
	.gbz-lightbox {
		transition: none;
	}
}

/* The TOC progress and the scroll-spy still update, but without easing. */
@media (prefers-reduced-motion: reduce) {
	.gbz-entry-toc__rail::after,
	.gbz-entry-toc__link,
	.gbz-entry-toc__num,
	.gbz-entry-share__link {
		transition: none;
	}
}

/* ── T19 archive anatomy (.gbz-arch-*) ──────────────────────── */
/* One shared anatomy for /aktuelles/, the category archives and
   /projekte/: hero with a fanned photo deck, filter pills, a 3/2/1
   card grid with a featured first card, cross link and CTA. */

/* 1. hero + scroll-driven photo deck */

.gbz-arch-hero {
	--q: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
	padding-bottom: clamp(2rem, 5vh, 3rem);
	overflow-x: clip;
}

.gbz-arch-hero__text {
	min-width: 0;
	max-width: 44rem;
}

/* No posts with a featured image: Bricks renders the stack without any
   .gbz-arch-deck__card, leaving only the glow. Drop the deck and let the
   hero text take the full width instead of an empty right column. */
.gbz-arch-deck:not(:has(.gbz-arch-deck__card)) {
	display: none;
}

.gbz-arch-hero:not(:has(.gbz-arch-deck__card)) {
	grid-template-columns: minmax(0, 1fr);
}

/* {archive_description} renders as <p class="lead"><p>…</p></p>, so the
   parser lifts the inner p out as a sibling of the empty .lead. Give that
   real description the lead look; the eyebrow stays untouched. */
.gbz-arch-hero__text > p:not(.eyebrow):not(.lead),
.gbz-arch-hero__text .lead > p {
	color: var(--ink-2);
	font-size: clamp(1rem, 1.3vw, 1.2rem);
	line-height: 1.55;
	max-width: 60ch;
	margin: 1.6rem 0 0;
}

.gbz-arch-hero .display {
	max-width: 22ch;
}

/* The deck: photo cards fanned like a hand. Two transform levels:
   .gbz-tilt gets the pointer tilt from site.js, while --q (written by
   [data-scroll-out]) rotates the stack and opens the fan as it leaves.
   Overflow stays visible so preserve-3d is not flattened; only each
   figure clips its image. */
.gbz-arch-deck {
	position: relative;
	isolation: isolate;
	justify-self: end;
	width: 100%;
	max-width: 25rem;
	padding-inline: 6%;
}

/* Soft green → teal → blue glow behind the deck. No drop shadow. */
.gbz-arch-deck::before {
	content: "";
	position: absolute;
	inset: -8% -4%;
	z-index: -1;
	border-radius: 50%;
	background:
		radial-gradient(55% 55% at 26% 18%, rgba(98, 210, 111, 0.3), transparent 70%),
		radial-gradient(60% 60% at 78% 84%, rgba(47, 179, 166, 0.22), transparent 72%),
		radial-gradient(60% 60% at 88% 40%, rgba(61, 155, 255, 0.26), transparent 72%);
	filter: blur(42px);
	opacity: 0.75;
	pointer-events: none;
}

.gbz-arch-deck__tilt {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
}

.gbz-arch-deck__stack {
	--fan-boost: 1;
	--fan-grow: 1.2;
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
	transform:
		translateY(calc(var(--q, 0) * -40px))
		rotateX(calc(var(--q, 0) * 18deg))
		rotateY(calc(var(--q, 0) * -22deg));
	transition: transform 0.5s var(--ease);
	will-change: transform;
}

/* Cards sit at negative Z, so the perspective on .gbz-tilt shrinks the
   back cards. --q multiplies every offset; --fan-boost opens the fan on
   hover. :nth-child(1) is the newest card and stays on top. */
.gbz-arch-deck__card {
	position: absolute;
	inset: 0;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-2);
	will-change: transform;
	transition: transform 0.5s var(--ease), border-color 0.4s var(--ease);
	transform:
		translate3d(
			calc(var(--fan-x) * (1 + var(--q, 0) * var(--fan-grow, 1.2)) * var(--fan-boost, 1)),
			0,
			calc(var(--fan-z) * (1 + var(--q, 0) * var(--fan-grow, 1.2)) * var(--fan-boost, 1))
		)
		rotateZ(calc(var(--fan-rot) * (1 + var(--q, 0) * var(--fan-grow, 1.2)) * var(--fan-boost, 1)));
}

.gbz-arch-deck__card:nth-child(1) {
	--fan-x: 0%;
	--fan-z: 0px;
	--fan-rot: -4deg;
}

.gbz-arch-deck__card:nth-child(2) {
	--fan-x: -8%;
	--fan-z: -55px;
	--fan-rot: -10deg;
}

.gbz-arch-deck__card:nth-child(3) {
	--fan-x: 7%;
	--fan-z: -105px;
	--fan-rot: 4deg;
}

.gbz-arch-deck__card:nth-child(4) {
	--fan-x: 14%;
	--fan-z: -155px;
	--fan-rot: 9deg;
}

.gbz-arch-deck__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9);
	transition: filter 1.2s var(--ease);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.gbz-arch-deck__stack:hover {
		--fan-boost: 1.12;
	}

	.gbz-arch-deck__stack:hover .gbz-arch-deck__card {
		border-color: var(--ink-3);
		transition-duration: 0.7s;
	}

	.gbz-arch-deck__stack:hover .gbz-arch-deck__img {
		filter: saturate(1);
	}
}

/* 2. filter pills (inside the hero) */

.gbz-arch-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.gbz-arch-filter__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 42px;
	padding: 0 1.05rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--glass);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-family: var(--f-mono);
	font-size: 0.72rem;
	line-height: 1;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ink-2);
	text-decoration: none;
	transition: border-color 0.4s var(--ease), color 0.4s var(--ease),
		background-color 0.4s var(--ease);
}

.gbz-arch-filter__link:hover {
	border-color: var(--ink-3);
	color: var(--ink);
}

/* Written by [data-filter-nav] when the link matches the current path. */
.gbz-arch-filter__link.is-active {
	border-color: var(--ink-3);
	color: var(--ink);
	background: rgba(14, 24, 36, 0.62);
}

.gbz-arch-filter__link.is-active::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 12px var(--green);
}

.gbz-arch-filter__link:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 4px;
}

/* 3. card grid + featured first card */

.gbz-arch-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
	align-items: stretch;
	counter-reset: gbz-arch;
}

/* The scroll entry owns `transform`; the hover lift uses the separate
   `translate` property so both can coexist. Do not transition
   `transform`: it is scroll-bound and would lag behind the pointer. */
.gbz-arch-card {
	--p: 1;
	--arch-tilt: 1;
	counter-increment: gbz-arch;
	transform-origin: 50% 100%;
	transition: translate 0.5s var(--ease), border-color 0.4s var(--ease);
}

.gbz-arch-card:hover {
	translate: 0 -4px;
	transform: none;
}

.gbz-arch-card__top {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Empty in the HTML: the number comes from the grid counter. */
.gbz-arch-card__num {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--f-mono);
	font-size: 0.72rem;
	line-height: 1.4;
	letter-spacing: 0.12em;
	color: var(--green);
	font-variant-numeric: tabular-nums;
}

.gbz-arch-card__num::before {
	content: counter(gbz-arch, decimal-leading-zero);
}

.gbz-arch-card__num::after {
	content: "";
	display: block;
	width: 1.5rem;
	height: 1px;
	background: var(--line);
}

/* Logo fallback: height-based mark plus a faint hairline grid so a wide
   card without a featured image still reads as a designed surface. */
.gbz-arch-card .gbz-card__media {
	background-color: var(--bg);
	background-image:
		repeating-linear-gradient(0deg, rgba(234, 241, 239, 0.04) 0 1px, transparent 1px 2rem),
		repeating-linear-gradient(90deg, rgba(234, 241, 239, 0.04) 0 1px, transparent 1px 2rem),
		linear-gradient(155deg, rgba(8, 20, 33, 0.55), rgba(4, 7, 13, 0.9)),
		radial-gradient(75% 85% at 26% 18%, rgba(61, 155, 255, 0.18), transparent 65%),
		url("logo-mark.webp");
	background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
	background-size: auto, auto, cover, cover, auto 38%;
	background-position: center, center, center, center, 50% 52%;
}

/* Same-layer override for Bricks' lazy background reset (see the shared
   .gbz-card rule above). */
@layer bricks {
	.gbz-arch-card .gbz-card__media.bricks-lazy-hidden {
		background-image:
			repeating-linear-gradient(0deg, rgba(234, 241, 239, 0.04) 0 1px, transparent 1px 2rem),
			repeating-linear-gradient(90deg, rgba(234, 241, 239, 0.04) 0 1px, transparent 1px 2rem),
			linear-gradient(155deg, rgba(8, 20, 33, 0.55), rgba(4, 7, 13, 0.9)),
			radial-gradient(75% 85% at 26% 18%, rgba(61, 155, 255, 0.18), transparent 65%),
			url("logo-mark.webp") !important;
	}
}

/* Scroll-driven 3D entry. --p is written by [data-scroll3d] (0 at the
   viewport bottom, 1 when the card is centred). Without JS the variable
   stays at 1, so every card renders flat and fully visible. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
	.js .gbz-arch-card {
		transform:
			perspective(1400px)
			translateY(calc((1 - var(--p, 1)) * 70px))
			rotateX(calc((1 - var(--p, 1)) * 24deg * var(--arch-tilt, 1)))
			scale(calc(0.94 + var(--p, 1) * 0.06));
		opacity: calc(0.35 + var(--p, 1) * 0.65);
	}

	/* The featured card is wide: keep its tilt gentle. */
	.js .gbz-arch-card:first-child {
		--arch-tilt: 0.42;
	}
}

/* With 3 columns, cards 2–4 are the first normal row (child 1 is the
   featured full-width card), so every third child is the middle one. */
@media (min-width: 992px) {
	.js .gbz-arch-card:nth-child(3n) {
		--arch-tilt: 1.25;
	}
}

@media (min-width: 992px) {
	.gbz-arch-card:first-child {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 58%) minmax(0, 1fr);
		align-items: stretch;
	}

	.gbz-arch-card:first-child .gbz-card__media {
		height: 100%;
		aspect-ratio: 16 / 9;
	}

	.gbz-arch-card:first-child .gbz-card__body {
		gap: 0.8rem;
		justify-content: center;
		padding: clamp(1.5rem, 3vw, 2.75rem);
	}

	.gbz-arch-card:first-child .gbz-card__title {
		font-size: clamp(1.8rem, 2.6vw, 2.6rem);
	}

	.gbz-arch-card:first-child .gbz-card__excerpt {
		-webkit-line-clamp: 4;
		line-clamp: 4;
	}
}

/* 4. cross link to the sibling listing */

.gbz-arch-cross {
	padding-top: clamp(2.5rem, 6vw, 4rem);
}

.gbz-arch-cross__row {
	display: grid;
	grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem 2rem;
	padding-block: 1.6rem;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	color: inherit;
	text-decoration: none;
}

.gbz-arch-cross__label {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
}

.gbz-arch-cross__text {
	font-size: clamp(1.2rem, 2vw, 1.8rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--ink);
}

.gbz-arch-cross__arrow {
	display: block;
	font-size: 1.4rem;
	line-height: 1;
	color: var(--ink-2);
	transition: transform 0.4s var(--ease), color 0.4s var(--ease);
}

.gbz-arch-cross__row:hover .gbz-arch-cross__arrow,
.gbz-arch-cross__row:focus-visible .gbz-arch-cross__arrow {
	transform: translateX(6px);
	color: var(--green);
}

.gbz-arch-cross__row:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 4px;
}

/* The list keeps v1's section rhythm: the cross row is the separator,
   the CTA starts a full gap later. */
.gbz-arch-cross + .gbz-cta {
	padding-top: var(--gbz-section-gap);
}

/* 5. responsive */

@media (max-width: 991px) {
	.gbz-arch-hero {
		grid-template-columns: minmax(0, 1fr);
		gap: clamp(2rem, 6vw, 3rem);
	}

	.gbz-arch-deck {
		justify-self: center;
		max-width: 19rem;
	}

	.gbz-arch-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gbz-arch-card:first-child {
		grid-column: 1 / -1;
	}

	.gbz-arch-cross__row {
		grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
	}
}

@media (max-width: 767px) {
	.gbz-arch-hero {
		padding-bottom: clamp(1.5rem, 5vh, 2.5rem);
	}

	.gbz-arch-deck {
		justify-self: center;
		max-width: 18rem;
		padding-inline: 8%;
	}

	.gbz-arch-deck__stack {
		--fan-grow: 0.7;
		transform:
			translateY(calc(var(--q, 0) * -20px))
			rotateX(calc(var(--q, 0) * 10deg))
			rotateY(calc(var(--q, 0) * -12deg));
	}

	.gbz-arch-grid {
		grid-template-columns: 1fr;
	}

	.gbz-arch-cross__row {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.4rem 1rem;
	}

	.gbz-arch-cross__label {
		grid-column: 1 / -1;
	}
}

@media (max-width: 478px) {
	.gbz-arch-deck {
		max-width: 16rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gbz-arch-deck__stack,
	.gbz-arch-deck__card,
	.gbz-arch-deck__img,
	.gbz-arch-card,
	.gbz-arch-cross__arrow {
		transition: none;
	}

	.gbz-arch-deck__stack {
		transform: none;
	}

	.gbz-arch-card:hover {
		translate: none;
	}
}

/* ── .gbz-hub — hub boxes (Aktivitäten / Über uns / Weltweit) ── */
/* One card component, four breadths. Shared by the Aktivitäten and
   Über uns hub pages and by the [gbz_bereich_kinder] shortcode on a
   taxonomic archive. The number comes from a CSS counter, so the HTML
   keeps an empty .gbz-hub-card__num. */

.gbz-hub {
	padding-top: var(--gbz-section-gap);
}

.gbz-hub-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
	counter-reset: gbz-hub;
}

.gbz-hub-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--glass);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	color: inherit;
	text-decoration: none;
	counter-increment: gbz-hub;
	/* The reveal entrance owns `transform`; the hover lift uses the
	   separate `translate` property so both can coexist. */
	transition: translate 0.5s var(--ease), border-color 0.4s var(--ease);
}

.gbz-hub-card:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 4px;
}

/* Tall photo card; the gradient darkens only the bottom edge so the
   photo meets the glass body without a hard cut. */
.gbz-hub-card__media {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	background-color: var(--bg);
	overflow: hidden;
	/* Logo fallback for a card without a photo, same idea as
	   .gbz-card__media: dark v1 gradient, faint mark, soft blue glow. */
	background-image:
		linear-gradient(155deg, rgba(8, 20, 33, 0.55), rgba(4, 7, 13, 0.9)),
		radial-gradient(75% 85% at 26% 18%, rgba(61, 155, 255, 0.18), transparent 65%),
		url("logo-mark.webp");
	background-repeat: no-repeat;
	background-size: cover, cover, 46% auto;
	background-position: center, center, 50% 52%;
}

/* Bricks clears background-image on lazy elements until their image has
   loaded. Keep the fallback visible; the override goes into the same
   layer as the Bricks rules (see .gbz-card__media above). */
@layer bricks {
	.gbz-hub-card .gbz-hub-card__media.bricks-lazy-hidden {
		background-image:
			linear-gradient(155deg, rgba(8, 20, 33, 0.55), rgba(4, 7, 13, 0.9)),
			radial-gradient(75% 85% at 26% 18%, rgba(61, 155, 255, 0.18), transparent 65%),
			url("logo-mark.webp") !important;
	}
}

.gbz-hub-card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 42%;
	background: linear-gradient(to top, rgba(4, 7, 13, 0.72), transparent);
	pointer-events: none;
}

.gbz-hub-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9);
	transition: transform 1.2s var(--ease), filter 1.2s var(--ease);
}

.gbz-hub-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.55rem;
	padding: clamp(1.1rem, 1.6vw, 1.5rem);
}

/* Empty in the HTML: 01, 02 … per grid. */
.gbz-hub-card__num {
	font-family: var(--f-mono);
	font-size: 0.7rem;
	line-height: 1.4;
	letter-spacing: 0.14em;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
	transition: color 0.4s var(--ease);
}

.gbz-hub-card__num::before {
	content: counter(gbz-hub, decimal-leading-zero);
}

.gbz-hub-card__title {
	margin: 0;
	font-size: clamp(1.25rem, 1.7vw, 1.6rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: var(--ink);
}

.gbz-hub-card__text {
	margin: 0;
	color: var(--ink-2);
	font-size: 0.95rem;
}

.gbz-hub-card__more {
	margin-top: auto;
	align-self: flex-start;
	padding-top: 0.35rem;
}

/* The card is one link, so the arrow shifts with the whole surface. */
.gbz-hub-card:hover .gbz-hub-card__more i {
	transform: translateX(4px);
}

/* 2-up and 4-up cards are landscape, 3-up and 4-up cards are tall. */
.gbz-hub-grid--2 .gbz-hub-card__media {
	aspect-ratio: 16 / 10;
}

/* Inline variant: the shortcode output inside an archive template.
   No section wrapper, so the block owns its gutter and its vertical
   rhythm. Insert it as a top-level element, never inside a .section. */
.gbz-hub--inline {
	padding-inline: var(--gutter);
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
	padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* A hub that closes a page needs a real gap before the CTA. */
.gbz-hub + .gbz-cta {
	padding-top: var(--gbz-section-gap);
}

@media (min-width: 768px) {
	.gbz-hub-grid--2,
	.gbz-hub-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gbz-hub-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.gbz-hub-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Pointer devices with motion allowed: lift, slow zoom, green number. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.gbz-hub-card:hover {
		translate: 0 -4px;
		border-color: var(--ink-3);
	}

	.gbz-hub-card:hover .gbz-hub-card__media img {
		transform: scale(1.04);
		filter: saturate(1.1);
	}

	.gbz-hub-card:hover .gbz-hub-card__num {
		color: var(--green);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gbz-hub-card,
	.gbz-hub-card__num,
	.gbz-hub-card__media img {
		transition: none;
	}

	.gbz-hub-card:hover {
		translate: none;
	}

	.gbz-hub-card:hover .gbz-hub-card__media img {
		transform: none;
	}
}