/* =============================================================
   Weissbuch Award – Elementor-Widgets
   ============================================================= */

/* ------------------------------------------------------------ Hero */
.wba-hero{
	position:relative;
	background:var(--wba-lavender);
	color:var(--wba-ink);
	padding:clamp(40px,6vw,80px) 0;
	overflow:hidden;
	border-radius:0;
}
.wba-hero__inner{
	position:relative;
	display:grid;
	grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
	align-items:center;
	gap:clamp(24px,4vw,56px);
	max-width:1240px;
	margin-inline:auto;
	padding-inline:clamp(20px,5vw,48px);
}
.wba-hero--center .wba-hero__inner{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;}
.wba-hero--bleed .wba-hero__inner{grid-template-columns:minmax(0,1fr);}
.wba-hero--bleed .wba-hero__illu{margin-top:24px;}

.wba-hero__lockup{position:relative;padding-left:clamp(0px,3vw,52px);}
.wba-hero__squiggle{
	position:absolute;left:0;top:-4px;
	width:clamp(28px,3vw,46px);
	color:var(--wba-ink);
	display:none;
}
@media (min-width:900px){.wba-hero__squiggle{display:block;left:-6px;}}

.wba .wba-hero__title{
	font-family:var(--wba-font-heading);
	font-size:clamp(2.6rem,6.4vw,5.1rem);
	font-weight:800;
	line-height:.98;
	letter-spacing:-.025em;
	margin:0;
	display:flex;flex-direction:column;align-items:flex-start;gap:.06em;
}
.wba-hero--center .wba-hero__title{align-items:center;}
.wba-hero__mark{
	background:linear-gradient(to bottom,transparent 16%,var(--wba-yellow) 16%,var(--wba-yellow) 88%,transparent 88%);
	padding-inline:.04em;
	-webkit-box-decoration-break:clone;
	box-decoration-break:clone;
}
.wba-hero__subtitle{
	display:block;
	font-family:var(--wba-font-heading);
	font-size:clamp(1.1rem,2.3vw,1.85rem);
	font-weight:400;
	letter-spacing:.22em;
	text-transform:uppercase;
	margin:.15em 0 0 .12em;
}
.wba-hero--center .wba-hero__subtitle{margin-left:0;}
.wba-hero__claim{
	margin:clamp(12px,1.6vw,20px) 0 0 .2em;
	font-size:clamp(.9rem,1.1vw,1.02rem);
	line-height:1.45;
	color:var(--wba-ink);
	max-width:22ch;
}
.wba-hero--center .wba-hero__claim{margin-inline:auto;}

.wba-hero__badge{
	position:absolute;
	right:clamp(-10px,2vw,20px);
	bottom:-8px;
	width:clamp(84px,9vw,132px);
	pointer-events:none;
}
.wba-hero--center .wba-hero__badge{position:static;margin:18px auto 0;}
.wba-star--badge{width:100%;}
.wba-star--badge .wba-star__inner{
	display:grid;
	grid-template-areas:"top" "bottom";
	place-items:center;
	font-family:var(--wba-font-heading);
	font-weight:700;
	font-size:clamp(1.1rem,1.7vw,1.7rem);
	color:var(--wba-ink);
	line-height:1;
	position:relative;
	gap:.12em;
}
.wba-hero__badge-top{grid-area:top;translate:-.32em 0;}
.wba-hero__badge-bottom{grid-area:bottom;translate:.32em 0;}
.wba-hero__badge-slash{
	position:absolute;inset:50% auto auto 50%;
	width:2px;height:1.85em;
	background:var(--wba-ink);
	translate:-50% -50%;
	rotate:24deg;
	border-radius:2px;
}

.wba-hero__illu{position:relative;}
.wba-hero--right .wba-hero__illu{
	margin-right:calc(-1 * clamp(20px,5vw,48px));
}
.wba-hero__illu img{width:100%;height:auto;}

@media (max-width:860px){
	.wba-hero__inner{grid-template-columns:minmax(0,1fr);}
	.wba-hero__badge{position:static;margin-top:18px;}
	.wba-hero--right .wba-hero__illu{margin-right:0;}
}

/* ------------------------------------------------- Überschrift-Block */
.wba-heading{margin:0;}
.wba-heading__title{margin:0 0 .55em;font-size:clamp(1.7rem,3vw,2.5rem);}
.wba-heading__text{
	margin-inline:auto;
	max-width:70ch;
	color:var(--wba-body);
}
.wba-heading__text > * + *{margin-top:1em;}
.wba-heading__text p{margin:0;}

/* -------------------------------------------------------- Jury-Grid */
.wba-jury-grid{
	--wba-jury-gap:40px;
	--wba-jury-row-gap:56px;
	display:grid;
	grid-template-columns:repeat(var(--wba-cols,2),minmax(0,1fr));
	gap:var(--wba-jury-row-gap) var(--wba-jury-gap);
}
@media (max-width:900px){.wba-jury-grid{--wba-cols:1;}}

.wba-jury-item{
	display:grid;
	grid-template-columns:var(--wba-jury-card-w,212px) minmax(0,1fr);
	gap:clamp(18px,2.5vw,32px);
	align-items:start;
}
@media (max-width:520px){
	.wba-jury-item{grid-template-columns:minmax(0,1fr);}
}
.wba-jury-item__link{display:block;text-decoration:none;}
.wba-jury-item--image-only{grid-template-columns:minmax(0,1fr);}

/*
 * Genau ein Eintrag: exakt die Breite einer der zwei Spalten – also die halbe
 * Flaeche minus halber Spaltenabstand – und mittig im Abschnitt.
 */
.wba-jury-grid--single{
	grid-template-columns:minmax(0,calc(50% - var(--wba-jury-gap) / 2));
	justify-content:center;
}
@media (max-width:900px){
	/* Einspaltiges Layout: der Eintrag nutzt die ganze Breite. */
	.wba-jury-grid--single{grid-template-columns:minmax(0,1fr);}
}
.wba-jury-item__name{
	font-size:clamp(1.25rem,1.9vw,1.6rem);
	margin:0 0 .2em;
}
.wba-jury-item__role{
	font-size:.92rem;
	font-weight:500;
	letter-spacing:0;
	text-transform:none;
	color:#92a0a0;
	margin:0 0 1em;
}
.wba-jury-item__text{font-size:.92rem;}
.wba-jury-item__text > * + *{margin-top:.8em;}
.wba-jury-item__text p{margin:0;}

/* ------------------------------------------------------ Jury-Karte */
/* Enthaelt ausschliesslich das Bild – Name und Award-Badge sind Teil der
   gelieferten Grafik und werden nicht als HTML nachgebaut. */
.wba-jury-card{
	position:relative;
	margin:0;
	aspect-ratio:4/5;
	border-radius:var(--wba-radius);
	overflow:hidden;
	background:var(--wba-periwinkle);
	isolation:isolate;
}
.wba-jury-card__img{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}
.wba-jury-card--band{
	flex:0 0 auto;
	height:var(--wba-marquee-h,330px);
	aspect-ratio:4/5;
	width:auto;
	border-radius:0;
}

/* --------------------------------------------------------- Laufband */
.wba-marquee{
	overflow:hidden;
	width:100%;
	--wba-marquee-h:330px;
	--wba-marquee-gap:2px;
}
.wba-marquee__track{
	display:flex;
	align-items:center;
	gap:var(--wba-marquee-gap);
	width:max-content;
	animation:wba-marquee 60s linear infinite;
	will-change:transform;
}
.wba-marquee__set{
	display:flex;
	align-items:center;
	gap:var(--wba-marquee-gap);
	flex:0 0 auto;
}
.wba-marquee--pause:hover .wba-marquee__track,
.wba-marquee--pause:focus-within .wba-marquee__track{animation-play-state:paused;}

/*
 * Verschoben wird um genau einen Satz plus einen Abstand. --wba-shift wird
 * vom Widget berechnet und inline gesetzt; ohne den Wert bleibt -50% als
 * Rueckfallebene. So folgt auf das letzte Bild wieder direkt das erste.
 */
@keyframes wba-marquee{
	from{transform:translate3d(0,0,0);}
	to{transform:translate3d(var(--wba-shift,-50%),0,0);}
}
.wba-marquee--logos{--wba-marquee-h:auto;--wba-marquee-gap:48px;}
@media (prefers-reduced-motion:reduce){
	.wba-marquee__track{animation:none;transform:none;}
	.wba-marquee{overflow-x:auto;}
}

/* --------------------------------------------------- Partner-Logos */
.wba-partners{
	background:var(--wba-lavender);
	border-radius:calc(var(--wba-radius) + 4px);
	padding:clamp(22px,3vw,34px) clamp(16px,3vw,32px);
	overflow:hidden;
}
.wba-partners__title{
	text-align:center;
	font-family:var(--wba-font-heading);
	font-size:.8rem;font-weight:700;
	color:var(--wba-ink);
	margin:0 0 18px;
}
.wba-partners__row{--wba-marquee-gap:48px;overflow:hidden;}
.wba-partners__static{
	display:flex;align-items:center;justify-content:space-around;
	flex-wrap:wrap;gap:var(--wba-marquee-gap);
}
.wba-partners__item{display:inline-flex;align-items:center;flex:0 0 auto;}
.wba-partners__logo{height:40px;width:auto;object-fit:contain;}
.wba-partners__logo--text{
	height:auto;
	font-family:var(--wba-font-heading);font-weight:700;font-size:1.05rem;color:var(--wba-ink);
	white-space:nowrap;
}

/* ------------------------------------------------------- Teaser */
.wba-teaser{--wba-t-align:center;--wba-t-mi:auto;text-align:var(--wba-t-align);}
.wba-teaser__media{
	background:var(--wba-lavender);
	border-radius:calc(var(--wba-radius) + 4px);
	aspect-ratio:4/3;
	overflow:hidden;
	margin-bottom:20px;
}
.wba-teaser__img{width:100%;height:100%;object-fit:cover;}
.wba-teaser__title{font-size:clamp(1.3rem,2.2vw,1.75rem);margin:0 0 .5em;}
.wba-teaser__text{font-size:.94rem;max-width:46ch;margin-inline:var(--wba-t-mi);}
.wba-teaser{--wba-t-justify:center;}
.wba-teaser__text > * + *{margin-top:.8em;}
.wba-teaser__text p{margin:0;}
/* Buttonzeile: beide Buttons nebeneinander, Umbruch auf schmalen Flaechen. */
.wba-teaser__buttons{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px;
	margin-top:18px;
	justify-content:var(--wba-t-justify,center);
}
.wba-teaser__btn{margin-top:0;}


/* ------------------------------------------ Illustrations-Band */
.wba-band{
	position:relative;
	width:100%;
	height:330px;
	overflow:hidden;
	background:var(--wba-lavender);
}
.wba-band--bleed{
	width:100vw;
	margin-left:50%;
	translate:-50% 0;
	max-width:none;
}
.wba-band__layer{
	position:absolute;inset:0;
	background-repeat:repeat-x;
	background-position:center center;
	background-size:auto 100%;
}
.wba-band--cover .wba-band__layer{background-repeat:no-repeat;background-size:cover;}
.wba-band--scroll{overflow:hidden;}
.wba-band--scroll .wba-band__layer{
	width:200%;
	background-repeat:repeat-x;
	animation:wba-band-scroll 90s linear infinite;
}
.wba-band--scroll .wba-band__layer--dupe{left:100%;}
@keyframes wba-band-scroll{
	from{transform:translate3d(0,0,0);}
	to{transform:translate3d(-50%,0,0);}
}
.wba-band__img{width:100%;height:100%;object-fit:cover;}

/* ------------------------------------------------- Donut-Statistik */
.wba-donut-wrap{margin:0;display:grid;justify-items:center;gap:16px;}
.wba-donut{
	position:relative;
	width:280px;
	max-width:100%;
	aspect-ratio:1;
	--wba-donut-value:var(--wba-mint);
	--wba-donut-track:var(--wba-lavender);
	--wba-donut-stroke:22;
}
.wba-donut svg{width:100%;height:100%;transform:rotate(-90deg);}
.wba-donut circle{stroke-width:var(--wba-donut-stroke,22);}
.wba-donut__track{stroke:var(--wba-donut-track);}
.wba-donut__value{
	stroke:var(--wba-donut-value);
	stroke-linecap:butt;
	transition:stroke-dashoffset 1.2s cubic-bezier(.22,.68,0,1);
}
.wba-donut--animate .wba-donut__value{stroke-dashoffset:238.76;}
.wba-donut--animate.is-visible .wba-donut__value{stroke-dashoffset:var(--wba-donut-target,238.76);}
.wba-donut__center{
	position:absolute;inset:0;
	display:grid;place-items:center;
	font-family:var(--wba-font-heading);
	font-size:clamp(1.4rem,3vw,2.2rem);font-weight:700;
	color:var(--wba-ink);
	text-align:center;
	padding:22%;
}
.wba-donut__caption{
	font-size:.88rem;color:var(--wba-body);text-align:center;max-width:34ch;
}

/* -------------------------------------------------------------- FAQ */
.wba-faq{max-width:620px;margin-inline:auto;}
.wba-faq__item{border-bottom:1px solid var(--wba-line);}
.wba-faq__heading{margin:0;font-size:inherit;font-weight:inherit;}
.wba-faq__q{
	display:flex;align-items:center;justify-content:space-between;gap:16px;
	width:100%;
	background:none;border:0;
	padding:18px 4px;
	font-family:var(--wba-font-body);
	font-size:.98rem;
	color:var(--wba-ink);
	text-align:left;
	cursor:pointer;
}
.wba-faq__q-text{flex:1 1 auto;}
.wba-faq__chevron{
	flex:0 0 auto;width:22px;height:22px;
	transition:rotate .2s ease;
	opacity:.75;
}
.wba-faq__item.is-open .wba-faq__chevron{rotate:180deg;}
.wba-faq__a{overflow:hidden;}
.wba-faq__a-inner{padding:0 4px 20px;font-size:.94rem;color:var(--wba-body);}
.wba-faq__a-inner > * + *{margin-top:.8em;}
.wba-faq__a-inner p{margin:0;}

/* --------------------------------- Elementor-Editor-Hilfsdarstellung */
.elementor-editor-active .wba-band--bleed{width:100%;margin-left:0;translate:none;}


/* ---------------------------------------------------------- Button-Widget */
.wba-button-wrap{display:block;}
.wba-btn__label{display:inline-block;}
.wba-btn--block{width:100%;justify-content:center;}
.wba-btn--outline{
	background:transparent;
	color:var(--wba-ink);
	border-color:currentColor;
}
.wba-btn--outline:hover{background:var(--wba-ink);color:#fff;border-color:var(--wba-ink);}

/* =========================================================================
   Hero-Varianten (WBA Hero – zweispaltig / zentriert)
   ========================================================================= */
.wba-hx{
	position:relative;
	display:flex;
	align-items:stretch;
	background:var(--wba-lavender);
	color:var(--wba-ink);
	overflow:hidden;
	padding-inline:clamp(20px,5vw,48px);
	min-height:var(--wba-hx-h,auto);
}
/* Feste Hoehe: Inhalt darf die Sektion nicht sprengen. */
.wba-hx--fixed{
	min-height:0;
	height:var(--wba-hx-h,auto);
	max-height:var(--wba-hx-h,none);
}
.wba-hx__inner{
	position:relative;
	flex:1 1 auto;
	width:100%;
	max-width:1240px;
	margin-inline:auto;
	min-width:0;
}
.wba-hx__placeholder{
	display:grid;place-items:center;
	width:100%;min-height:120px;
	border:1px dashed currentColor;
	border-radius:var(--wba-radius);
	font-size:.85rem;opacity:.55;
	text-align:center;padding:16px;
}

/* ------------------------------------------------------------- Bloecke */
.wba-hx__block{margin:0;min-width:0;}
.wba-hx .wba-hx__text{
	margin:0;
	font-family:var(--wba-font-heading);
	color:inherit;
	line-height:1.08;
	letter-spacing:-.01em;
	display:block;
}
.wba-hx .wba-hx__block--text p.wba-hx__text{
	font-family:var(--wba-font-body);
	font-weight:400;
	line-height:1.5;
	letter-spacing:0;
}
.wba-hx__img{display:block;height:auto;max-width:100%;}
.wba-hx__block--space{flex:0 0 auto;}

/* ------------------------------------------------------- Zweispaltig */
.wba-hx--split .wba-hx__inner{
	display:grid;
	/* Anteil der linken Spalte, gemessen an der Breite des Inhaltsbereichs. */
	grid-template-columns:calc(var(--wba-hx-ratio,50) * 1%) minmax(0,1fr);
	align-items:center;
	column-gap:48px;
}
.wba-hx--split.wba-hx--reverse .wba-hx__inner{
	grid-template-columns:minmax(0,1fr) calc(var(--wba-hx-ratio,50) * 1%);
}
.wba-hx__col{min-width:0;}
.wba-hx__content{display:flex;flex-direction:column;align-items:flex-start;}
.wba-hx__media{
	align-self:stretch;
	display:flex;align-items:center;
	/* Standard: Bild bleibt links in seiner Spalte stehen. */
	justify-content:flex-start;
	min-width:0;
}
.wba-hx__media-img{
	width:100%;
	height:100%;
	max-width:100%;
	max-height:100%;
	object-fit:contain;
	object-position:left center;
}
.wba-hx--reverse .wba-hx__content{order:2;}
.wba-hx--reverse .wba-hx__media{order:1;}

/* Umbruchpunkte. !important, weil Elementors responsive Controls dieselbe
   Spezifitaet erzeugen und spaeter eingebunden werden. */
@media (max-width:1024px){
	.wba-hx--stack-tablet .wba-hx__inner{grid-template-columns:minmax(0,1fr)!important;row-gap:32px;}
	.wba-hx--stack-tablet .wba-hx__media{align-self:auto;}
	.wba-hx--stack-tablet.wba-hx--fixed{height:auto;max-height:none;min-height:var(--wba-hx-h,auto);}
	.wba-hx--stack-tablet.wba-hx--reverse .wba-hx__content{order:0;}
	.wba-hx--stack-tablet.wba-hx--reverse .wba-hx__media{order:0;}
}
@media (max-width:767px){
	.wba-hx--stack-mobile .wba-hx__inner{grid-template-columns:minmax(0,1fr)!important;row-gap:28px;}
	.wba-hx--stack-mobile .wba-hx__media{align-self:auto;}
	.wba-hx--stack-mobile.wba-hx--fixed{height:auto;max-height:none;min-height:var(--wba-hx-h,auto);}
}

/* --------------------------------------------------------- Zentriert */
.wba-hx--centered .wba-hx__inner{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	gap:0;
}
.wba-hx--centered .wba-hx__content,
.wba-hx--centered .wba-hx__stack{
	display:flex;flex-direction:column;align-items:center;width:100%;
}
.wba-hx__center{
	position:relative;
	display:flex;align-items:center;justify-content:center;
	max-width:100%;
	min-width:0;
}
.wba-hx__center-img{
	max-width:100%;
	height:auto;
	object-fit:contain;
}
.wba-hx__stack--overlay{
	position:absolute;
	inset:0;
	justify-content:center;
	pointer-events:none;
}

/* =========================================================================
   Einreichungsformular

   Zwei Flaechen: oeffentlich (lila) und nicht oeffentlich (grau). Farben je
   Flaeche ueber --wba-form-bg, --wba-form-line und --wba-form-field.
   ========================================================================= */
.wba-form{
	max-width:760px;
	margin-inline:auto;
	color:var(--wba-ink);
}
.wba-form__intro{
	margin-bottom:34px;
	font-size:.92rem;
	line-height:1.6;
	color:var(--wba-ink);
}
.wba-form__intro p{margin:0 0 1em;}
.wba-form__intro strong{font-weight:700;}

.wba-form__notice,
.wba-form__success{
	margin:0 0 28px;
	padding:14px 18px;
	border-radius:var(--wba-radius);
	font-size:.94rem;
}
.wba-form__notice{background:#fdecef;color:#8a1c31;}
.wba-form__success{background:var(--wba-mint);color:var(--wba-ink);font-size:1.05rem;}

/* Honigtopf – fuer Menschen unsichtbar, fuer Automaten erreichbar. */
.wba-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ------------------------------------------------------------- Flaechen */
.wba-form__panel{
	--wba-form-bg:#eee2fe;
	--wba-form-line:#bfabd9;
	--wba-form-field:#bfabd9;
	/*
	 * Die vier Abstände des Formulars. Jeder wirkt an genau einer Stelle,
	 * dadurch lassen sie sich unabhängig voneinander einstellen:
	 */
	--wba-form-legend-gap:20px;    /* Überschrift → erstes Feld            */
	--wba-form-heading-top:10px;   /* zusätzlich oberhalb der Überschrift  */
	--wba-form-before-line:30px;   /* letztes Feld → Trennlinie            */
	--wba-form-after-line:16px;    /* Trennlinie → Überschriftbereich      */
	background:var(--wba-form-bg);
	border-radius:var(--wba-radius);
	padding:clamp(20px,3.5vw,34px);
	margin-bottom:22px;
}
.wba-form__panel--private{
	--wba-form-bg:#f8f8f8;
	--wba-form-line:#c9c9c9;
	--wba-form-field:#ebebeb;
}

.wba-form__panel-head{
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:16px;
	flex-wrap:wrap;
	padding-bottom:14px;
	margin-bottom:26px;
	border-bottom:1px solid var(--wba-form-line);
}
.wba-form__panel-title{
	font-size:.72rem;
	font-weight:500;
	letter-spacing:.09em;
	text-transform:uppercase;
	color:var(--wba-ink);
}
.wba-form__required-note{
	font-size:.72rem;
	color:var(--wba-ink);
	opacity:.75;
}

/* -------------------------------------------------------------- Gruppen */
.wba-form__group{
	border:0;
	margin:0;
	min-width:0;
}

/*
 * Trennlinie zwischen zwei Abschnitten.
 * Als eigenes Element, damit sie nicht von der Ueberschrift ausgespart wird
 * und auch ohne dieses Stylesheet sichtbar bleibt.
 */
.wba-form__sep{
	/* Die Linie selbst wird inline gezeichnet; hier nur die Farbe. */
	color:var(--wba-form-line,#bfabd9);
}

/*
 * Abstaende um die Trennlinie: siehe Widget. Sie stehen inline im HTML,
 * weil sie ueber das Stylesheet nicht durchgekommen sind. Einstellbar im
 * Widget unter Einstellungen.
 */
.wba-form__legend{
	display:flex;
	align-items:center;
	gap:12px;
	width:100%;
	/*
	 * Der obere Abstand laeuft ueber padding, nicht ueber margin.
	 * Grund: Ein oberer Aussenabstand am ersten Kind faellt mit dem Abstand
	 * des Elternelements zusammen (margin collapsing). Beim ersten Abschnitt
	 * verschwanden die 10 px dadurch, bei den folgenden nicht – genau das war
	 * der Grund fuer die ungleichen Abstaende.
	 */
	margin:0 0 var(--wba-form-legend-gap);
	padding:var(--wba-form-heading-top) 0 0;
	font-family:var(--wba-font-heading);
	font-size:1.18rem;
	font-weight:700;
	color:var(--wba-ink);
}
.wba-form__num{
	display:grid;
	place-items:center;
	flex:0 0 auto;
	width:28px;
	height:28px;
	border-radius:50%;
	background:var(--wba-form-line);
	color:#fff;
	font-size:.85rem;
	font-weight:600;
	font-family:var(--wba-font-body);
}
/*
 * Der Hinweis über dem Uploadfeld nutzt dieselbe Klasse wie die
 * Feldbeschriftungen – Größe und Abstand kommen also von dort.
 */
.wba-form__media-hint{text-align:left;}

/* --------------------------------------------------------------- Felder */
.wba-form__grid{
	margin-top:0;
	margin-bottom:0;
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	column-gap:24px;
	row-gap:16px;
	align-items:start;
}
.wba-form__field{display:flex;flex-direction:column;min-width:0;}
.wba-form__label{
	display:block;
	margin:0 0 6px;
	font-size:.78rem;
	line-height:1.4;
	color:var(--wba-ink);
}
.wba-form__req{color:var(--wba-ink);}

.wba-form__control{
	width:100%;
	font-family:inherit;
	font-size:.9rem;
	color:var(--wba-ink);
	background:#fff;
	border:1px solid var(--wba-form-field);
	border-radius:8px;
	padding:10px 13px;
	transition:border-color .15s ease,box-shadow .15s ease;
}
.wba-form__control::placeholder{color:#9aa3a3;}
.wba-form__control:focus{
	outline:2px solid transparent;
	border-color:var(--wba-blue);
	box-shadow:0 0 0 3px color-mix(in srgb,var(--wba-blue) 16%,transparent);
}
.wba-form__control--area{resize:vertical;min-height:90px;flex:1 1 auto;}
.wba-form__field.has-error .wba-form__control{border-color:#c0392b;}
.wba-form__error{margin:6px 0 0;font-size:.8rem;color:#c0392b;}

/* Auswahlfeld mit eigenem Chevron */
.wba-form__select-wrap{position:relative;}
.wba-form__control--select{
	appearance:none;
	-webkit-appearance:none;
	padding-right:42px;
	cursor:pointer;
}
.wba-form__chevron{
	position:absolute;
	right:13px;top:50%;
	translate:0 -50%;
	width:18px;height:18px;
	pointer-events:none;
	color:var(--wba-ink);
}

/* Auswahlkreise */
.wba-form__radios{display:flex;flex-direction:column;gap:10px;margin-top:4px;}
.wba-form__radio,
.wba-form__consent{
	display:flex;
	align-items:flex-start;
	gap:11px;
	font-size:.7rem;
	line-height:1.5;
	cursor:pointer;
}
.wba-form__radio{align-items:center;}
.wba-form__consent{margin-bottom:14px;}
.wba-form__radio input,
.wba-form__consent input{position:absolute;opacity:0;width:1px;height:1px;}
.wba-form__dot{
	flex:0 0 auto;
	width:16px;height:16px;
	margin-top:.2em;
	border-radius:50%;
	border:1px solid var(--wba-form-field,#c9c9c9);
	background:#fff;
	transition:box-shadow .15s ease,background-color .15s ease;
}
.wba-form__radio .wba-form__dot{margin-top:0;}
.wba-form__radio input:checked + .wba-form__dot,
.wba-form__consent input:checked + .wba-form__dot{
	background:var(--wba-blue);
	border-color:var(--wba-blue);
	box-shadow:inset 0 0 0 3px #fff;
}
.wba-form__radio input:focus-visible + .wba-form__dot,
.wba-form__consent input:focus-visible + .wba-form__dot{
	outline:2px solid var(--wba-blue);
	outline-offset:2px;
}
.wba-form__consent.has-error .wba-form__dot{border-color:#c0392b;}
.wba-form__consent-text{
	/* Gleiche Größe und Zeilenhöhe wie der Datenschutztext darüber. */
	font-size:.7rem;
	line-height:1.65;
	color:var(--wba-ink);
}

/* -------------------------------------------------------------- Uploads */
.wba-form__dropzone{
	border:1px dashed var(--wba-form-line);
	border-radius:var(--wba-radius);
	padding:28px 20px;
	text-align:center;
	background:transparent;
	transition:border-color .15s ease,background-color .15s ease;
}
.wba-form__dropzone.is-dragover{
	border-color:var(--wba-blue);
	background:color-mix(in srgb,var(--wba-blue) 6%,transparent);
}
.wba-form__dropzone.has-error{border-color:#c0392b;}
.wba-form__dropzone-title{margin:0 0 6px;font-weight:700;font-size:.88rem;}
.wba-form__dropzone-or{margin:0 0 14px;font-size:.82rem;}
.wba-form__dropzone-hint{margin:16px 0 0;font-size:.78rem;}
.wba-form__file-btn{
	position:relative;
	overflow:hidden;
	cursor:pointer;
	text-transform:none;
	letter-spacing:.04em;
	font-size:.84rem;
	padding:.7em 1.2em;
}
.wba-form__file-btn input[type="file"]{
	position:absolute;inset:0;
	opacity:0;width:100%;height:100%;
	cursor:pointer;
}
.wba-form__filelist{
	list-style:none;
	margin:16px 0 0;
	padding:0;
	display:flex;flex-direction:column;gap:6px;
	font-size:.8rem;
}
.wba-form__filelist li{display:flex;justify-content:space-between;gap:12px;}
.wba-form__filelist li.is-too-large{color:#c0392b;}

/* --------------------------------------------------- Datenschutzabschnitt */
.wba-form__privacy{padding:14px clamp(4px,2vw,18px) 0;}
.wba-form__privacy-title{
	font-family:var(--wba-font-heading);
	font-size:1.25rem;
	font-weight:700;
	color:var(--wba-ink);
	margin:0 0 16px;
}
.wba-form__legal{
	font-size:.7rem;
	line-height:1.65;
	margin:0 0 22px;
	color:var(--wba-ink);
}
.wba-form__captcha{margin:18px 0;}
.wba-form__actions{display:flex;justify-content:center;margin-top:30px;}
.wba-form__submit{min-width:180px;justify-content:center;cursor:pointer;}

@media (max-width:700px){
	.wba-form__grid{grid-template-columns:minmax(0,1fr);}
	.wba-form__field{grid-column:1!important;grid-row:auto!important;}
}

/* =========================================================================
   Eingangs-Animationen mit einstellbarer Strecke

   Elementors fadeIn*-Keyframes verschieben um 100 % der Elementhoehe. Hier
   werden sie gegen eigene getauscht, die --wba-fade-distance auswerten. Ohne
   gesetzten Wert greift der Rueckfallwert 100 % – das Verhalten bleibt also
   unveraendert, bis jemand den Regler benutzt.

   Der Regler sitzt an jedem Element unter Erweitert > Bewegungseffekte >
   "Weg der Animation". Alternativ per Klasse: wba-fade--xs/sm/md/lg.
   ========================================================================= */
.wba .animated.fadeInUp{animation-name:wba-fade-up;}
.wba .animated.fadeInDown{animation-name:wba-fade-down;}
.wba .animated.fadeInLeft{animation-name:wba-fade-left;}
.wba .animated.fadeInRight{animation-name:wba-fade-right;}

@keyframes wba-fade-up{
	from{opacity:0;transform:translate3d(0,var(--wba-fade-distance,100%),0);}
	to{opacity:1;transform:none;}
}
@keyframes wba-fade-down{
	from{opacity:0;transform:translate3d(0,calc(-1 * var(--wba-fade-distance,100%)),0);}
	to{opacity:1;transform:none;}
}
@keyframes wba-fade-left{
	from{opacity:0;transform:translate3d(calc(-1 * var(--wba-fade-distance,100%)),0,0);}
	to{opacity:1;transform:none;}
}
@keyframes wba-fade-right{
	from{opacity:0;transform:translate3d(var(--wba-fade-distance,100%),0,0);}
	to{opacity:1;transform:none;}
}

/* Voreinstellungen als CSS-Klasse, falls der Regler nicht benutzt wird. */
.wba-fade{--wba-fade-distance:40px;}
.wba-fade--xs{--wba-fade-distance:12px;}
.wba-fade--sm{--wba-fade-distance:24px;}
.wba-fade--md{--wba-fade-distance:40px;}
.wba-fade--lg{--wba-fade-distance:72px;}

/* Nur einblenden, ohne Bewegung, wenn reduzierte Bewegung gewuenscht ist. */
@media (prefers-reduced-motion:reduce){
	.wba .animated{--wba-fade-distance:0px;}
}

/* =========================================================================
   Hero: rechtes Bild bis zum Fensterrand

   Ohne Bleed begrenzt .wba-hx__inner auf das Textmass und zentriert sich.
   Mit Bleed wird der Container aufgehoben und stattdessen NUR links so viel
   Innenabstand gesetzt, dass der Textteil weiter auf dem gewohnten Raster
   sitzt. Rechts bleibt genau --wba-hx-edge stehen. Dadurch ist der Abstand
   zum Fensterrand exakt der eingestellte Wert – unabhaengig davon, wie breit
   die umgebende Sektion ist.
   ========================================================================= */
.wba-hx{
	--wba-hx-pad:clamp(20px,5vw,48px);
	--wba-hx-max:1240px;
	--wba-hx-edge:0px;
	padding-inline:var(--wba-hx-pad);
}
.wba-hx__inner{max-width:var(--wba-hx-max);}

.wba-hx--bleed{padding-inline:0;}
.wba-hx--bleed > .wba-hx__inner{
	max-width:none;
	margin-inline:0;
	/* max() verhindert negative Werte auf schmalen Bildschirmen. */
	padding-left:max(var(--wba-hx-pad), calc(50vw - var(--wba-hx-max) / 2));
	padding-right:var(--wba-hx-edge);
	/*
	 * Wichtig: Die linke Spalte bekommt eine feste Breite, abgeleitet vom
	 * Textmass. Wuerde hier prozentual gerechnet, waeuchse sie mit dem Fenster
	 * mit – und die Bildkante rechts daneben wanderte beim Aufziehen mit.
	 */
	grid-template-columns:calc(var(--wba-hx-max,1240px) * var(--wba-hx-ratio,50) / 100) minmax(0,1fr);
}
.wba-hx--bleed.wba-hx--reverse > .wba-hx__inner{
	grid-template-columns:minmax(0,1fr) calc(var(--wba-hx-max,1240px) * var(--wba-hx-ratio,50) / 100);
}

/* Spiegelbildlich, wenn das Bild links steht. */
.wba-hx--bleed.wba-hx--reverse > .wba-hx__inner{
	padding-left:var(--wba-hx-edge);
	padding-right:max(var(--wba-hx-pad), calc(50vw - var(--wba-hx-max) / 2));
}

/* Bild als Ueberschrift: das Ueberschriften-Tag darf nichts beitragen. */
.wba-hx .wba-hx__img-heading{margin:0;line-height:0;font-size:0;}

/* Gestapelt gilt wieder normaler Innenabstand auf beiden Seiten. */
@media (max-width:1024px){
	.wba-hx--bleed.wba-hx--stack-tablet > .wba-hx__inner{
		padding-left:var(--wba-hx-pad);
		padding-right:var(--wba-hx-pad);
	}
}
@media (max-width:767px){
	.wba-hx--bleed.wba-hx--stack-mobile > .wba-hx__inner{
		padding-left:var(--wba-hx-pad);
		padding-right:var(--wba-hx-pad);
	}
}

/* =========================================================================
   Mobile Feinschliff
   ========================================================================= */
@media (max-width:767px){

	/* Initiative-Zeile: Umbruch nach dem Label, alles zentriert. */
	.wba-initiative{
		justify-content:center;
		text-align:center;
		row-gap:12px;
	}
	.wba-initiative__label{
		flex:0 0 100%;
		text-align:center;
	}

	/* Filter-Pills seitlich durchscrollbar statt gestapelt. */
	.wba-filters{
		flex-wrap:nowrap;
		justify-content:flex-start;
		overflow-x:auto;
		overscroll-behavior-x:contain;
		-webkit-overflow-scrolling:touch;
		scroll-snap-type:x proximity;
		scrollbar-width:none;
		padding-bottom:4px;
	}
	.wba-filters::-webkit-scrollbar{display:none;}
	.wba-filters > .wba-pill{
		flex:0 0 auto;
		scroll-snap-align:start;
	}

	/* Infobox: rechts 20 px mehr Luft als auf den uebrigen Seiten. */
	.wba .wba-infobox{
		padding-right:calc(clamp(20px,3vw,32px) + 20px);
	}
}

/* =========================================================================
   Zentrieren per Hilfsklasse

   Eintragen unter Erweitert > CSS-Klassen – funktioniert an Widgets,
   Spalten, Sektionen und Containern gleichermassen:

     wba-center     immer zentriert
     wba-center-t   ab Tablet abwaerts (bis 1024 px)
     wba-center-m   nur auf Mobil (bis 767 px)

   Zentriert Text, mittet Blockelemente aus und richtet Flex-/Grid-Reihen
   mittig aus – inklusive der eigenen Widgets dieses Themes.
   ========================================================================= */
/* immer */
	.wba-center,
.wba-center > .elementor-widget-container{text-align:center;}

/* Blockelemente mittig setzen */
.wba-center .wba-heading,
.wba-center .wba-heading__text,
.wba-center .wba-teaser,
.wba-center .wba-teaser__text,
.wba-center .wba-form,
.wba-center .wba-prose,
.wba-center .wba-faq{margin-inline:auto;text-align:center;}

.wba-center .wba-infobox{margin-inline:auto;width:fit-content;max-width:100%;}

/* Flex- und Grid-Reihen ausmitteln */
.wba-center .wba-initiative,
.wba-center .wba-filters,
.wba-center .wba-projekte__actions,
.wba-center .wba-button-wrap,
.wba-center .wba-partners__static,
.wba-center .wba-form__actions{justify-content:center;text-align:center;}

.wba-center .wba-hx__content{align-items:center;text-align:center;}
.wba-center .wba-hx__inner{justify-items:center;}

.wba-center .wba-jury-grid{justify-content:center;}
.wba-center .wba-jury-item{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;}
.wba-center .wba-jury-item__body{align-items:center;}

.wba-center img{margin-inline:auto;}

/* Elementor-Sektionen und -Container */
.wba-center.elementor-section > .elementor-container,
.wba-center.e-con > .e-con-inner{justify-content:center;align-items:center;}
.wba-center.e-con{--justify-content:center;--align-items:center;--text-align:center;}

@media (max-width:1024px){
	.wba-center-t,
	.wba-center-t > .elementor-widget-container{text-align:center;}

	/* Blockelemente mittig setzen */
	.wba-center-t .wba-heading,
	.wba-center-t .wba-heading__text,
	.wba-center-t .wba-teaser,
	.wba-center-t .wba-teaser__text,
	.wba-center-t .wba-form,
	.wba-center-t .wba-prose,
	.wba-center-t .wba-faq{margin-inline:auto;text-align:center;}

	.wba-center-t .wba-infobox{margin-inline:auto;width:fit-content;max-width:100%;}

	/* Flex- und Grid-Reihen ausmitteln */
	.wba-center-t .wba-initiative,
	.wba-center-t .wba-filters,
	.wba-center-t .wba-projekte__actions,
	.wba-center-t .wba-button-wrap,
	.wba-center-t .wba-partners__static,
	.wba-center-t .wba-form__actions{justify-content:center;text-align:center;}

	.wba-center-t .wba-hx__content{align-items:center;text-align:center;}
	.wba-center-t .wba-hx__inner{justify-items:center;}

	.wba-center-t .wba-jury-grid{justify-content:center;}
	.wba-center-t .wba-jury-item{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;}
	.wba-center-t .wba-jury-item__body{align-items:center;}

	.wba-center-t img{margin-inline:auto;}

	/* Elementor-Sektionen und -Container */
	.wba-center-t.elementor-section > .elementor-container,
	.wba-center-t.e-con > .e-con-inner{justify-content:center;align-items:center;}
	.wba-center-t.e-con{--justify-content:center;--align-items:center;--text-align:center;}
}

@media (max-width:767px){
	.wba-center-m,
	.wba-center-m > .elementor-widget-container{text-align:center;}

	/* Blockelemente mittig setzen */
	.wba-center-m .wba-heading,
	.wba-center-m .wba-heading__text,
	.wba-center-m .wba-teaser,
	.wba-center-m .wba-teaser__text,
	.wba-center-m .wba-form,
	.wba-center-m .wba-prose,
	.wba-center-m .wba-faq{margin-inline:auto;text-align:center;}

	.wba-center-m .wba-infobox{margin-inline:auto;width:fit-content;max-width:100%;}

	/* Flex- und Grid-Reihen ausmitteln */
	.wba-center-m .wba-initiative,
	.wba-center-m .wba-filters,
	.wba-center-m .wba-projekte__actions,
	.wba-center-m .wba-button-wrap,
	.wba-center-m .wba-partners__static,
	.wba-center-m .wba-form__actions{justify-content:center;text-align:center;}

	.wba-center-m .wba-hx__content{align-items:center;text-align:center;}
	.wba-center-m .wba-hx__inner{justify-items:center;}

	.wba-center-m .wba-jury-grid{justify-content:center;}
	.wba-center-m .wba-jury-item{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;}
	.wba-center-m .wba-jury-item__body{align-items:center;}

	.wba-center-m img{margin-inline:auto;}

	/* Elementor-Sektionen und -Container */
	.wba-center-m.elementor-section > .elementor-container,
	.wba-center-m.e-con > .e-con-inner{justify-content:center;align-items:center;}
	.wba-center-m.e-con{--justify-content:center;--align-items:center;--text-align:center;}
}


/* =========================================================================
   Vollflaechige Widgets buendig an den Nachbarn

   Elementor legt auf gefuellte Spalten und Container standardmaessig 10 px
   Innenabstand. Bei Hero, Illustrations-Band und Laufband entsteht dadurch
   ein heller Spalt zur Navigation. :has() entfernt den Abstand gezielt nur
   dort, wo eines dieser Widgets direkt drinsteckt.
   ========================================================================= */
.elementor-element-populated:has(> .elementor-widget-wba-hero),
.elementor-element-populated:has(> .elementor-widget-wba-hero-split),
.elementor-element-populated:has(> .elementor-widget-wba-hero-centered),
.elementor-element-populated:has(> .elementor-widget-wba-illustration-band),
.elementor-element-populated:has(> .elementor-widget-wba-jury-marquee),
.e-con-inner:has(> .elementor-widget-wba-hero),
.e-con-inner:has(> .elementor-widget-wba-hero-split),
.e-con-inner:has(> .elementor-widget-wba-hero-centered),
.e-con-inner:has(> .elementor-widget-wba-illustration-band),
.e-con-inner:has(> .elementor-widget-wba-jury-marquee){
	padding:0;
}

/* Auch der Abstand unter dem Widget entfaellt, damit nichts nachrutscht. */
.elementor-widget-wba-hero,
.elementor-widget-wba-hero-split,
.elementor-widget-wba-hero-centered,
.elementor-widget-wba-illustration-band,
.elementor-widget-wba-jury-marquee{
	margin-block:0;
}

/* Die Sektion selbst darf oben keinen Rand mitbringen. */
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget-wba-hero),
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget-wba-hero-split),
.elementor-section:has(> .elementor-container > .elementor-column > .elementor-element-populated > .elementor-widget-wba-hero-centered){
	padding-top:0;
}

/* =========================================================================
   Projekte beim Scrollen nachladen

   Die Werte entsprechen Elementors Voreinstellung "schnell" (800 ms) mit
   300 ms Verzoegerung. Die eigenen Keyframes werden genutzt, damit die
   Animation nicht davon abhaengt, ob Elementors Animationsdatei geladen ist.
   ========================================================================= */
.wba-loadmore{position:relative;}
.wba-loadmore__sentinel{height:1px;}
.wba-loadmore__status{
	min-height:1.5em;
	margin-top:24px;
	text-align:center;
	font-size:.88rem;
	color:var(--wba-body);
}

.wba-card--enter{
	--wba-fade-distance:var(--wba-enter-distance,30px);
	animation-name:wba-fade-up;
	animation-duration:var(--wba-enter-duration,800ms);
	animation-delay:var(--wba-enter-delay,300ms);
	animation-timing-function:cubic-bezier(.22,.68,0,1);
	animation-fill-mode:both;
}

@media (prefers-reduced-motion:reduce){
	.wba-card--enter{
		animation-name:none;
		opacity:1;
	}
}

/* Mehrfachauswahl (Nebenkategorien) */
.wba-form__select-wrap--multi{position:relative;}
.wba-form__control--multi{
	appearance:none;
	-webkit-appearance:none;
	padding:8px 10px;
	min-height:104px;
	cursor:pointer;
	background-image:none;
}
.wba-form__control--multi option{
	padding:7px 8px;
	border-radius:5px;
	cursor:pointer;
}
.wba-form__control--multi option:hover{
	background:color-mix(in srgb,var(--wba-blue) 12%,transparent);
}
.wba-form__control--multi option:checked{
	background:var(--wba-blue);
	color:#fff;
}
.wba-form__hint{
	margin:6px 0 0;
	font-size:.72rem;
	line-height:1.45;
	color:var(--wba-ink);
	opacity:.75;
}

/* =========================================================================
   Ruhigerer Bildaufbau und stabiles Layout beim Filtern
   ========================================================================= */

/*
 * Bilder blenden sich ein, sobald sie vollständig geladen sind. Die Klassen
 * setzt ausschließlich JavaScript – ohne Skript bleibt alles wie gehabt.
 */
.wba-card__img.is-loading,
.wba-jury-card__img.is-loading,
.wba-teaser__img.is-loading,
.wba-projekt__bild-img.is-loading{
	opacity:0;
}
.wba-card__img.is-loaded,
.wba-jury-card__img.is-loaded,
.wba-teaser__img.is-loaded,
.wba-projekt__bild-img.is-loaded{
	opacity:1;
	transition:opacity .35s ease;
}

/* Während des Ladens deutet die Fläche das Bild an, statt leer zu bleiben. */
.wba-card__media,
.wba-jury-card{
	background-image:linear-gradient(
		100deg,
		rgba(255,255,255,0) 30%,
		rgba(255,255,255,.35) 50%,
		rgba(255,255,255,0) 70%
	);
	background-size:200% 100%;
	background-repeat:no-repeat;
	background-position:150% 0;
}
.wba-card__media:has(.is-loading),
.wba-jury-card:has(.is-loading){
	animation:wba-shimmer 1.4s ease-in-out infinite;
}
@keyframes wba-shimmer{
	from{background-position:150% 0;}
	to{background-position:-50% 0;}
}

/* Der Raster behält beim Filtern seine Höhe – sonst springt der Footer. */
.wba-grid[data-wba-filterable]{
	transition:min-height .2s ease;
}

@media (prefers-reduced-motion:reduce){
	.wba-card__img.is-loaded,
	.wba-jury-card__img.is-loaded,
	.wba-teaser__img.is-loaded,
	.wba-projekt__bild-img.is-loaded{transition:none;}
	.wba-card__media:has(.is-loading),
	.wba-jury-card:has(.is-loading){animation:none;}
}