/* =============================================================
   Weissbuch Award – Basis, Layout, Bausteine
   Farben/Fonts kommen als CSS-Variablen aus dem Customizer.
   ============================================================= */

:root{
	--wba-ink:#17453d;
	--wba-body:#4d555f;
	--wba-lavender:#e9ddfb;
	--wba-lavender-2:#dcc9f7;
	--wba-lavender-3:#efe6fe;
	--wba-mint:#a8e0c0;
	--wba-pink:#fac8d6;
	--wba-periwinkle:#c3c8f5;
	--wba-yellow:#ffe94e;
	--wba-blue:#3e5be8;
	--wba-surface:#fff;
	--wba-line:#e6e8ec;
	--wba-radius:14px;
	--wba-font-heading:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
	--wba-font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

	--wba-star-12:polygon(50.0% 1.7%, 58.6% 17.8%, 73.7% 8.9%, 74.5% 25.5%, 92.9% 25.2%, 81.6% 41.5%, 99.5% 50.0%, 84.3% 59.2%, 90.9% 73.6%, 73.7% 73.7%, 73.7% 91.1%, 59.0% 83.7%, 50.0% 99.3%, 41.0% 83.7%, 26.8% 90.2%, 27.1% 72.9%, 8.6% 73.9%, 16.5% 59.0%, 1.7% 50.0%, 18.0% 41.4%, 9.8% 26.8%, 25.8% 25.8%, 26.6% 9.4%, 40.9% 15.9%);
	--wba-star-9:polygon(50.0% 0.5%, 61.0% 19.9%, 80.7% 13.4%, 76.3% 34.8%, 96.1% 41.9%, 81.7% 55.6%, 90.3% 73.2%, 71.0% 75.0%, 66.1% 94.2%, 50.0% 79.8%, 33.7% 94.7%, 30.5% 73.2%, 8.7% 73.8%, 19.6% 55.4%, 3.9% 41.9%, 21.9% 33.8%, 20.1% 14.3%, 40.0% 22.5%);
}

/* ---------------------------------------------------------- Reset */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body.wba{
	margin:0;
	font-family:var(--wba-font-body);
	font-size:16px;
	line-height:1.6;
	color:var(--wba-body);
	background:var(--wba-surface);
	-webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:inherit;}

.screen-reader-text{
	position:absolute!important;width:1px;height:1px;overflow:hidden;
	clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap;
}
.wba-skip-link:focus{
	position:fixed;inset:12px auto auto 12px;width:auto;height:auto;clip:auto;clip-path:none;
	z-index:9999;background:var(--wba-ink);color:#fff;padding:10px 16px;border-radius:999px;
}
:where(a,button,input,select,textarea,summary):focus-visible{
	outline:2px solid var(--wba-blue);outline-offset:3px;border-radius:6px;
}

/* ------------------------------------------------------- Typografie */
.wba h1,.wba h2,.wba h3,.wba h4,.wba h5,
.wba-h1,.wba-h2,.wba-h3{
	font-family:var(--wba-font-heading);
	color:var(--wba-ink);
	font-weight:700;
	line-height:1.12;
	letter-spacing:-.01em;
	margin:0 0 .5em;
}
.wba-h1{font-size:clamp(2.1rem,4.4vw,3.4rem);}
.wba-h2{font-size:clamp(1.7rem,3vw,2.4rem);}
.wba-h3{font-size:clamp(1.15rem,1.6vw,1.4rem);}
.wba-lead{font-size:1.075rem;}

.wba-eyebrow{
	font-family:var(--wba-font-body);
	font-size:.78rem;
	font-weight:600;
	letter-spacing:.11em;
	text-transform:uppercase;
	color:var(--wba-ink);
	margin:0 0 .6em;
}

/*
 * Gelber Marker – Signature-Element der Marke.
 *
 * Alle Masse in em, damit der Strich mit der Schriftgroesse skaliert:
 *   Hoehe        ein Drittel der Schriftgroesse
 *   Ueberstand   ein Sechstel links und rechts
 *   Versatz      ein Sechstel nach unten, gemessen ab der Mitte
 *
 * Der Ueberstand entsteht aus Innenabstand plus negativem Aussenabstand –
 * der Strich wird also breiter, ohne dass sich der Text verschiebt.
 * background-color muss ausdruecklich transparent sein, weil <mark> vom
 * Browser eine eigene gelbe Flaeche mitbringt.
 */
/*
 * Die drei Masse werden NICHT hier gesetzt, sondern als :root-Variablen aus
 * dem Customizer. Nur so lassen sie sich global aendern; die Werte in den
 * var()-Aufrufen sind die Rueckfallebene, falls nichts hinterlegt ist.
 */
.wba-mark{
	color:inherit;
	background-color:transparent;
	background-image:linear-gradient(var(--wba-mark-color,#ffd201),var(--wba-mark-color,#ffd201));
	background-repeat:no-repeat;
	background-size:100% var(--wba-mark-height,0.3333em);
	background-position:0 calc(50% + var(--wba-mark-offset,0.1667em));
	padding-inline:var(--wba-mark-overhang,0.1667em);
	margin-inline:calc(-1 * var(--wba-mark-overhang,0.1667em));
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
}

/*
 * In Projektkarten und anderen Auflistungen bleibt der Titel unmarkiert.
 * Die PHP-Seite gibt dort schon reinen Text aus; diese Regel ist das Netz
 * fuer Auflistungen, die spaeter anders gebaut werden.
 */
.wba-card .wba-mark,
.wba-jury-item .wba-mark{
	background-image:none;
	background-color:transparent;
	padding-inline:0;
	margin-inline:0;
}

/* ---------------------------------------------------------- Layout */
.wba-container{
	width:100%;
	max-width:1240px;
	margin-inline:auto;
	padding-inline:clamp(20px,5vw,48px);
}
.wba-section{padding-block:clamp(48px,7vw,104px);}
.wba-section__title{text-align:center;margin-bottom:clamp(24px,3vw,40px);}
.wba-grid{
	display:grid;
	grid-template-columns:repeat(var(--wba-cols,3),minmax(0,1fr));
	gap:24px;
}
.wba-grid--3{--wba-cols:3;}
@media (max-width:1024px){.wba-grid{--wba-cols:2;}}
@media (max-width:640px){.wba-grid{--wba-cols:1;}}

.wba-empty{
	text-align:center;color:var(--wba-body);font-size:.95rem;
	padding:32px 0;margin:0;
}

/* --------------------------------------------------------- Buttons */
.wba-btn{
	display:inline-flex;align-items:center;gap:.55em;
	font-family:var(--wba-font-body);
	font-size:.92rem;font-weight:500;
	text-decoration:none;
	padding:.7em 1.15em;
	border-radius:999px;
	border:1px solid transparent;
	transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.wba-btn .wba-arrow{width:1.15em;height:1.15em;flex:0 0 auto;}
.wba-btn:hover{transform:translateY(-1px);}

.wba-btn--soft{background:var(--wba-lavender);color:var(--wba-ink);}
.wba-btn--soft:hover{background:var(--wba-lavender-2);}

.wba-btn--primary{
	background:var(--wba-blue);color:#fff;
	font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.78rem;
	padding:.95em 1.6em;
}
.wba-btn--primary:hover{background:color-mix(in srgb,var(--wba-blue) 85%,#000);}

.wba-btn--ghost{background:transparent;color:var(--wba-ink);padding-inline:0;}
.wba-btn--ghost:hover{color:var(--wba-blue);}

/* Zwei zusaetzliche Palettenfarben, zentral im Customizer aenderbar. */
.wba-btn--yellow{
	background:var(--wba-btn-yellow,#ffd201);
	color:var(--wba-ink);
}
.wba-btn--yellow:hover{background:color-mix(in srgb,var(--wba-btn-yellow,#ffd201) 88%,#000);}

.wba-btn--pink{
	background:var(--wba-btn-pink,#ffbfcf);
	color:var(--wba-ink);
}
.wba-btn--pink:hover{background:color-mix(in srgb,var(--wba-btn-pink,#ffbfcf) 88%,#000);}

/* ----------------------------------------------------------- Pills */
.wba-pill{
	display:inline-flex;align-items:center;gap:.5em;
	font-family:var(--wba-font-body);
	font-size:.78rem;line-height:1.2;
	color:var(--wba-ink);
	background:var(--wba-surface);
	/* Kontur in der Kategoriefarbe – Rueckfall auf die neutrale Linie. */
	border:1px solid var(--wba-pill-color,var(--wba-line));
	border-radius:999px;
	padding:.42em .85em;
	margin:0;
	cursor:default;
	transition:background-color .18s ease,border-color .18s ease;
}
.wba-pill__dot{
	width:.62em;height:.62em;border-radius:50%;
	background:var(--wba-pill-color,var(--wba-lavender));
	flex:0 0 auto;
}
.wba-pill__clear{font-size:1.05em;line-height:1;opacity:.55;margin-left:.15em;}

button.wba-pill{cursor:pointer;}
button.wba-pill:hover{border-color:color-mix(in srgb,var(--wba-pill-color,var(--wba-line)) 75%,var(--wba-ink));}
button.wba-pill.is-active{
	background:color-mix(in srgb,var(--wba-pill-color,var(--wba-lavender)) 32%,#fff);
	border-color:var(--wba-pill-color,var(--wba-lavender));
	font-weight:500;
}

.wba-filters{
	display:flex;flex-wrap:wrap;gap:10px;
	justify-content:center;
	margin-bottom:28px;
}

/* ------------------------------------------------------ Projektkarte */
.wba-card{
	background:var(--wba-surface);
	border:1px solid var(--wba-line);
	border-radius:var(--wba-radius);
	overflow:hidden;
	display:flex;
	transition:box-shadow .2s ease,transform .2s ease;
}
.wba-card:hover{box-shadow:0 14px 34px -18px rgba(23,69,61,.35);transform:translateY(-2px);}
.wba-card[hidden]{display:none;}
.wba-card__link{
	display:flex;flex-direction:column;
	text-decoration:none;color:inherit;width:100%;
}
.wba-card__media{
	position:relative;
	/* Farbfläche und Bild sind immer exakt 16:9 – flex darf sie nicht strecken. */
	aspect-ratio:var(--wba-card-ratio,16/9);
	flex:0 0 auto;
	height:auto;
	max-height:none;
	overflow:hidden;
	background:var(--wba-lavender);
}
/* Vorschaubild füllt das 16:9-Feld immer vollständig aus – auch bei
   abweichendem Originalformat wird beschnitten, nicht verzerrt. */
.wba-card__img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.wba-card__body{
	padding:16px 20px 20px;
	display:flex;flex-direction:column;align-items:flex-start;gap:12px;
	flex:1 1 auto;
}
/* Pill nur so breit wie ihr Inhalt, nicht auf Kartenbreite gestreckt. */
.wba-card__body > .wba-pill{align-self:flex-start;max-width:100%;}
/* Titel und Text duerfen weiterhin die volle Breite nutzen. */
.wba-card__body > .wba-card__title,
.wba-card__body > .wba-card__excerpt{align-self:stretch;}
.wba-card__title{
	font-family:var(--wba-font-heading);
	font-size:1.3rem;font-weight:700;line-height:1.2;
	color:var(--wba-ink);margin:0;
}
.wba-card__excerpt{margin:0;font-size:.93rem;}
.wba-card__footer{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	border-top:1px solid var(--wba-line);
	padding:14px 20px;
	font-size:.88rem;
	color:var(--wba-body);
}
.wba-card__meta{display:inline-flex;align-items:center;gap:.55em;}

/* Pin behält sein Seitenverhältnis (14.228 : 19.258) */
.wba-pin{
	height:1.15em;
	width:auto;
	flex:0 0 auto;
	color:var(--wba-pin-color,#b7b7b7);
}
.wba-arrow{
	width:1.45em;
	height:1.45em;
	flex:0 0 auto;
	color:var(--wba-arrow-color,#254141);
	transition:transform .18s ease;
}
.wba-card__link:hover .wba-arrow{transform:translateX(3px);}

.wba-projekte__actions{display:flex;justify-content:flex-end;margin-top:28px;}

/* --------------------------------------------------------- Infobox */
.wba-infobox{
	display:grid;
	grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
	gap:clamp(20px,3vw,44px);
	align-items:start;
	background:var(--wba-infobox-bg,#e2d4f5);
	border-radius:calc(var(--wba-radius) + 4px);
	padding:clamp(20px,3vw,32px);
	max-width:760px;
	margin-inline:auto;
	text-align:left;
}
.wba-infobox--single,
.wba-infobox--rows{grid-template-columns:minmax(0,1fr);}
/* Zeile ohne Icon buendig zu den Zeilen mit Icon halten (38px + 14px Abstand). */
.wba-infobox__row--noicon{padding-left:52px;}
.wba-infobox__value--text{font-size:1.05rem;line-height:1.45;}
@media (max-width:520px){
	.wba-infobox__row--noicon{padding-left:0;}
}
.wba-infobox__col{display:flex;flex-direction:column;gap:18px;min-width:0;}
.wba-infobox__col--wide{
	border-left:1px solid var(--wba-infobox-line,#cfbee5);
	padding-left:clamp(16px,2.5vw,32px);
}
.wba-infobox__row{display:flex;align-items:flex-start;gap:14px;}
.wba-infobox__icon{
	display:grid;place-items:center;
	width:var(--wba-icon-size,38px);
	height:var(--wba-icon-size,38px);
	flex:0 0 auto;
	border-radius:var(--wba-icon-radius,12px);
	background:var(--wba-icon-bg,rgba(255,255,255,.55));
	color:var(--wba-icon-color,#8b6fc4);
	overflow:hidden;
}
.wba-infobox__icon .wba-pin{height:52%;width:auto;color:inherit;}
.wba-infobox__icon-img{width:60%;height:60%;object-fit:contain;}
.wba-infobox__stack{display:flex;flex-direction:column;min-width:0;}
.wba-infobox__label{
	font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
	color:var(--wba-infobox-label,#937cb5);
}
.wba-infobox__value{
	font-family:var(--wba-font-heading);
	font-size:1.2rem;font-weight:500;color:var(--wba-ink);line-height:1.3;
}
/* Kein zusaetzlicher Abstand: Label und Text stapeln wie in der linken Spalte,
   dadurch beginnen beide Spalten auf derselben Hoehe. */
.wba-infobox__col--wide{gap:0;}
.wba-infobox__text{
	margin:0;
	font-family:var(--wba-font-heading);
	font-size:1.15rem;
	font-weight:500;
	line-height:1.45;
	color:var(--wba-ink);
}
@media (max-width:700px){
	.wba-infobox{grid-template-columns:minmax(0,1fr);}
	.wba-infobox__col--wide{
		border-left:0;
		border-top:1px solid var(--wba-infobox-line,#cfbee5);
		padding-left:0;
		padding-top:20px;
	}
}
@media (max-width:767px){
	/* Breite richtet sich nach dem Inhalt, Box sitzt mittig. */
	.wba-infobox{
		width:fit-content;
		max-width:100%;
		margin-inline:auto;
	}
}

/* ----------------------------------------------------------- Stern */
.wba-star{
	position:relative;display:inline-grid;place-items:center;
	background:#fff;
	clip-path:var(--wba-star-12);
	aspect-ratio:1;
}
.wba-star__inner{position:relative;z-index:1;display:grid;place-items:center;}
.wba-star--jury{
	position:absolute;inset:auto 50% 4%;
	translate:50% 0;
	width:86%;
	clip-path:var(--wba-star-9);
	pointer-events:none;
}

/* -------------------------------------------------- Fließtext/Prose */
/*
 * Fliesstext und Zitatblock teilen sich dieselben Typografie-Werte, damit der
 * Beitragstext auf der Projektseite exakt so gesetzt ist wie das Zitat.
 * Zum Aendern genuegt es, die vier Variablen anzupassen.
 */
:root{
	--wba-prose-family:var(--wba-font-body);
	--wba-prose-size:1.02rem;
	--wba-prose-line:1.65;
	--wba-prose-weight:400;
	--wba-prose-spacing:0;
	--wba-prose-color:var(--wba-body);
	--wba-prose-width:760px;
}

/*
 * body.wba davor, weil Elementors Kit-Stylesheet eine eigene Schriftfamilie
 * auf body und auf seine Widget-Klassen legt. Ohne die hoehere Spezifitaet
 * gewinnt dort die im Kit eingestellte Schrift.
 */
body.wba .wba-prose,
body.wba .wba-quote,
body.wba .wba-prose p,
body.wba .wba-prose li,
body.wba .wba-prose blockquote,
body.wba .wba-quote p,
body.wba .wba-prose .elementor-widget-text-editor,
body.wba .wba-prose .elementor-widget-text-editor p{
	font-family:var(--wba-prose-family);
	font-size:var(--wba-prose-size);
	line-height:var(--wba-prose-line);
	font-weight:var(--wba-prose-weight);
	letter-spacing:var(--wba-prose-spacing);
	color:var(--wba-prose-color);
}

/* Ueberschriften im Fliesstext behalten ihre eigene Groesse. */
body.wba .wba-prose h2,
body.wba .wba-prose h3,
body.wba .wba-prose h4{
	font-family:var(--wba-font-heading);
	color:var(--wba-ink);
}

.wba-prose{max-width:var(--wba-prose-width,760px);margin-inline:auto;}
.wba-prose > * + *{margin-top:1.1em;}
.wba-prose p{margin:0;}
.wba-prose h2{font-size:clamp(1.4rem,2.2vw,1.9rem);margin-top:2em;}
.wba-prose h3{font-size:1.2rem;margin-top:1.6em;}
.wba-prose a{color:var(--wba-blue);text-decoration:underline;text-underline-offset:2px;}
.wba-prose ul,.wba-prose ol{padding-left:1.3em;margin:0;}
.wba-prose li + li{margin-top:.4em;}
.wba-prose img{border-radius:var(--wba-radius);}

.wba-quote{
	margin:0 0 2.2em;
	padding-left:clamp(16px,2.5vw,28px);
	border-left:3px solid var(--wba-blue);
	max-width:var(--wba-prose-width,760px);
	margin-inline:auto;
	/* Typografie kommt aus den gemeinsamen --wba-prose-* Variablen oben. */
}

/* ---------------------------------------------------------- Header */
.wba-header{
	position:sticky;top:0;z-index:100;
	background:rgba(255,255,255,.94);
	backdrop-filter:blur(10px);
	border-bottom:1px solid transparent;
}
.wba-header.is-stuck{border-bottom-color:var(--wba-line);}
.wba-header__inner{
	display:flex;align-items:center;justify-content:space-between;gap:24px;
	min-height:74px;
}
.wba-header__brand{min-width:1px;}
.wba-header__title{
	font-family:var(--wba-font-heading);font-weight:700;font-size:1.05rem;
	color:var(--wba-ink);text-decoration:none;
}
.wba-header .custom-logo{max-height:40px;width:auto;}
.wba-header__logo-link{display:inline-flex;align-items:center;}
.wba-header__logo{width:auto;max-width:100%;display:block;}

.wba-nav{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);}
.wba-nav__list{
	display:flex;align-items:center;gap:clamp(14px,2vw,30px);
	list-style:none;margin:0;padding:0;
}
.wba-nav__list li{position:relative;}
.wba-nav__list a{
	display:inline-flex;align-items:center;gap:.35em;
	font-size:.76rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase;
	color:var(--wba-ink);text-decoration:none;
	padding-block:.6em;
	transition:color .16s ease;
}
.wba-nav__list a:hover{color:var(--wba-blue);}
.wba-nav__list .menu-item-has-children > a::after{
	content:"";width:.45em;height:.45em;
	border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
	rotate:45deg;translate:0 -.15em;
}
.wba-nav__list ul{
	position:absolute;top:100%;left:-18px;
	min-width:230px;
	list-style:none;margin:0;padding:14px 0;
	background:#fff;
	border-radius:6px;
	box-shadow:0 18px 44px -16px rgba(23,69,61,.3);
	opacity:0;visibility:hidden;translate:0 6px;
	transition:opacity .16s ease,translate .16s ease,visibility .16s;
}
.wba-nav__list li:hover > ul,
.wba-nav__list li:focus-within > ul{opacity:1;visibility:visible;translate:0 0;}
.wba-nav__list ul a{display:block;padding:8px 22px;letter-spacing:.04em;}

/*
 * Burger-Symbol: drei Balken, bei geoeffnetem Menue zum X.
 *
 * Die Balken liegen absolut, damit Drehung und Verschiebung um denselben
 * Mittelpunkt laufen. Eindeutige Klassen statt :nth-child, weil der erste
 * Kindknoten der versteckte Text fuer Screenreader ist – die frueheren
 * Selektoren :first-child und :last-child griffen deshalb ins Leere.
 */
.wba-burger{
	--wba-burger-color:#254141;
	--wba-burger-width:24px;
	--wba-burger-height:2px;
	--wba-burger-gap:6px;

	display:none;
	position:relative;
	width:44px;height:44px;
	padding:0;
	background:none;
	border:0;
	cursor:pointer;
	color:var(--wba-burger-color);
}
.wba-burger__bar{
	position:absolute;
	left:50%;
	width:var(--wba-burger-width);
	height:var(--wba-burger-height);
	margin-left:calc(var(--wba-burger-width) / -2);
	background:currentColor;
	border-radius:999px;
	transition:top .25s ease,transform .25s ease,opacity .18s ease;
}
/* Mitte des Buttons: 22px – der mittlere Balken sitzt bei 21px. */
.wba-burger__bar--1{top:calc(21px - var(--wba-burger-gap));}
.wba-burger__bar--2{top:21px;}
.wba-burger__bar--3{top:calc(21px + var(--wba-burger-gap));}

.wba-burger[aria-expanded="true"] .wba-burger__bar--1{
	top:21px;
	transform:rotate(45deg);
}
.wba-burger[aria-expanded="true"] .wba-burger__bar--2{
	opacity:0;
	transform:scaleX(.3);
}
.wba-burger[aria-expanded="true"] .wba-burger__bar--3{
	top:21px;
	transform:rotate(-45deg);
}

@media (max-width:900px){
	.wba-burger{display:block;}
	.wba-nav{
		position:absolute;inset:74px 0 auto;
		flex-direction:column;align-items:stretch;
		background:#fff;
		border-bottom:1px solid var(--wba-line);
		padding:18px clamp(20px,5vw,48px) 26px;
		gap:8px;
		display:none;
	}
	.wba-nav.is-open{display:flex;}
	.wba-nav__list{flex-direction:column;align-items:stretch;gap:2px;}
	.wba-nav__list ul{
		position:static;opacity:1;visibility:visible;translate:0;
		box-shadow:none;padding:0 0 8px 16px;min-width:0;
	}
	.wba-nav__cta{align-self:flex-start;margin-top:8px;}
}

/* ---------------------------------------------------- Initiative */
.wba-initiative{
	display:flex;align-items:center;flex-wrap:wrap;gap:14px;
	font-size:.86rem;color:var(--wba-ink);
}
.wba-initiative__label{white-space:nowrap;}
.wba-initiative__logo{height:26px;width:auto;object-fit:contain;}
.wba-initiative__logo--text{
	display:inline-flex;align-items:center;height:auto;
	font-family:var(--wba-font-heading);font-weight:700;font-size:1.05rem;color:var(--wba-ink);
}
.wba-initiative__x{opacity:.55;font-size:.9rem;}
.wba-initiative__link,
.wba-initiative__item{display:inline-flex;align-items:center;}
.wba-initiative--footer{padding-block:22px;}

/* ---------------------------------------------------------- Footer */
.wba-footer{background:var(--wba-lavender-3);}
.wba-footer__top{border-bottom:1px solid rgba(23,69,61,.1);}
.wba-footer__bottom{padding-block:clamp(28px,4vw,54px);}
/*
 * Die Spalten sitzen INNERHALB des Containers – dadurch beginnen sie an
 * derselben Kante wie der uebrige Inhalt und nicht am Fensterrand.
 */
.wba-footer__cols{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
	gap:24px;
	max-width:760px;
}
.wba-footer__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.wba-footer__list a{
	font-size:.83rem;font-weight:600;color:var(--wba-ink);text-decoration:none;
}
.wba-footer__list a:hover{text-decoration:underline;text-underline-offset:3px;}
.wba-footer-widget__title{font-size:.9rem;margin:0 0 .6em;}

/* ------------------------------------------------------ Pagination */
.wba-pagination{margin-top:44px;}
.wba-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.wba-pagination .page-numbers{
	display:grid;place-items:center;
	min-width:40px;height:40px;padding:0 12px;
	border:1px solid var(--wba-line);border-radius:999px;
	font-size:.88rem;text-decoration:none;color:var(--wba-ink);
}
.wba-pagination .page-numbers.current{background:var(--wba-lavender);border-color:transparent;font-weight:600;}

/* -------------------------------------------------- Projekt-Single */
.wba-projekt__hero{background:var(--wba-hero-bg,var(--wba-lavender));padding-block:clamp(36px,5vw,64px) 0;}
.wba-projekt__hero-inner{
	display:flex;flex-direction:column;align-items:center;text-align:center;
	gap:16px;
	padding-bottom:clamp(40px,6vw,80px);
	position:relative;
}
/*
 * Kopfbild der Detailseite: feste Hoehe, Breite ergibt sich aus dem Bild.
 * Eckenradius wie bei den Projektkarten.
 */
.wba-projekt__bild{
	position:relative;
	margin:0;
	height:var(--wba-projekt-bild-hoehe,240px);
	max-width:100%;
	border-radius:var(--wba-radius);
	overflow:hidden;
	line-height:0;
}
.wba-projekt__bild-img{
	height:100%;
	width:auto;
	max-width:100%;
	object-fit:cover;
	display:block;
}
@media (max-width:520px){
	.wba-projekt__bild{height:auto;max-height:var(--wba-projekt-bild-hoehe,240px);}
	.wba-projekt__bild-img{width:100%;height:auto;max-height:var(--wba-projekt-bild-hoehe,240px);}
}
/* .wba h1 hat hoehere Spezifitaet als eine reine Klasse – deshalb mit .wba davor. */
.wba .wba-projekt__title{
	margin:.2em 0 0;
	max-width:16ch;
	font-weight:900; /* Inter Black */
}
.wba-projekt__subtitle{
	margin:0;
	font-size:1.15rem;
	color:var(--wba-infobox-label,#937cb5);
}
@media (min-width:768px){
	/* Hoechstens 80 Prozent des Textmasses – bleibt mittig unter der Headline. */
	.wba-projekt__subtitle{
		max-width:calc(var(--wba-prose-width,760px) * .8);
		margin-inline:auto;
	}
}
.wba-projekt__hero .wba-infobox{margin-top:clamp(20px,3vw,34px);width:100%;}
.wba-projekt__body{padding-block:clamp(36px,5vw,64px) 0;}

/* Die Infobox ragt im Design über die Farbkante hinaus */
@media (min-width:900px){
	.wba-projekt__hero{padding-bottom:0;}
	.wba-projekt__hero-inner{padding-bottom:0;}
	.wba-projekt__hero .wba-infobox{margin-bottom:-70px;}
	.wba-projekt__body{padding-top:110px;}
}

.wba-jury-single{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;}
@media (max-width:700px){.wba-jury-single{grid-template-columns:minmax(0,1fr);}}

/* --------------------------------------------- Reduzierte Bewegung */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
}

/* Hinweis fuer angemeldete Redakteure, wenn Initiative-Logos fehlen. */
.wba-initiative__hint{
	flex:0 0 100%;
	font-size:.75rem;
	color:#8a1c31;
	background:#fdecef;
	border-radius:8px;
	padding:6px 10px;
}


/* Logo blendet sich erst ein, wenn der Hero durchgescrollt ist. */
.wba-header--logo-hidden .wba-header__brand{
	opacity:0;
	visibility:hidden;
	transform:translateY(-4px);
	transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.wba-header--logo-hidden.is-logo-visible .wba-header__brand{
	opacity:1;
	visibility:visible;
	transform:none;
}

/* -------------------------------------------- Kennzeichnung KI-Platzhalter */
.wba-ki-badge{
	position:absolute;
	top:16px;
	left:16px;
	z-index:2;
	display:inline-flex;
	align-items:center;
	max-width:calc(100% - 32px);
	padding:.4em .7em;
	border:1px solid #fff;
	border-radius:999px;
	background:rgba(0,0,0,.35);
	color:#fff;
	font-family:var(--wba-font-body);
	font-size:.78rem;
	line-height:1.2;
	letter-spacing:0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	/* Hebt die Schrift auch auf hellen Bildstellen ab. */
	backdrop-filter:blur(2px);
	-webkit-backdrop-filter:blur(2px);
}

@media (max-width:520px){
	.wba-ki-badge{
		top:12px;
		left:12px;
	}
}