/* =============================================================
   Startseite
   Die Reihenfolge der Abschnitte ist die Dramaturgie der Seite:
   Plakat — wer und warum — wo wir stehen — was du tun kannst.
   Papier, Kobalt und Signal wechseln sich ab wie Bögen an einer
   Litfaßsäule. Beim Geld wird es ruhig.
   ============================================================= */

/* --- 1 Hero: das Plakat ---------------------------------------------- */

.hero {
	padding-block: clamp(2.5rem, 1rem + 6vw, 5.5rem) clamp(3rem, 1rem + 6vw, 5.5rem);
	overflow: hidden;
}

.hero__innen {
	display: grid;
	gap: var(--r5);
	align-items: center;
}
@media (min-width: 900px) {
	.hero__innen { grid-template-columns: 1.25fr 0.75fr; gap: var(--r5); }
}

.hero__zeile {
	display: inline-block;
	font-family: var(--schrift-anzeige);
	font-size: var(--gr-etikett);
	font-weight: 800;
	font-stretch: 110%;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	background: var(--tinte);
	color: var(--papier);
	padding: 0.3rem 0.7rem;
	margin-bottom: var(--r3);
	transform: rotate(-1.5deg);
}

.hero__titel {
	font-size: var(--gr-hero);
	font-weight: 900;
	font-stretch: 66%;
	line-height: 0.9;
	letter-spacing: -0.01em;
	margin-bottom: var(--r4);
	hyphens: manual;
}
.hero__titel em {
	/* Das betonte Wort bekommt den Leuchtmarker, leicht schief aufgetragen. */
	color: var(--tinte);
	background: linear-gradient(-2deg, transparent 12%, var(--gelb) 12%, var(--gelb) 88%, transparent 88%);
	padding-inline: 0.08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.hero__lead { font-size: var(--gr-lead); max-width: 44ch; }
.hero__lead p:last-child { margin-bottom: 0; }

.hero__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: var(--r3);
	margin-top: var(--r4);
	margin-bottom: 0;
}

/* Rechts: Zeichnung im Zweifarbdruck, leicht verrutscht wie beim Riso. */
.hero__bild {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 260px;
}

.hero__fleck {
	position: absolute;
	width: min(88%, 420px);
	aspect-ratio: 1;
	background: var(--signal);
	border-radius: 47% 53% 42% 58% / 55% 45% 55% 45%;
	mix-blend-mode: multiply;
	transform: translate(6%, 4%) rotate(-8deg);
}

.hero__zeichnung {
	position: relative;
	width: 100%;
	max-width: 460px;
	height: auto;
	color: var(--kobalt);
	mix-blend-mode: multiply;
}
.hero__zeichnung path,
.hero__zeichnung rect,
.hero__zeichnung circle { stroke-width: 3.4; }

/* Der Versatz: dieselbe Zeichnung ein zweites Mal, in Tinte, drei Pixel daneben. */
.hero__zeichnung--versatz {
	position: absolute;
	color: var(--tinte);
	opacity: 0.18;
	transform: translate(4px, 3px);
}

.hero__foto-rahmen {
	position: relative;
	width: 100%;
	border: var(--rand-stark);
	box-shadow: 10px 10px 0 var(--signal);
	transform: rotate(1.5deg);
	aspect-ratio: 4 / 5;
}

/* Der Aufkleber mit dem Finanzierungsstand — klebt schräg über allem. */
.aufkleber {
	position: absolute;
	right: max(0px, 4%);
	bottom: 2%;
	z-index: 2;
	width: clamp(118px, 28vw, 150px);
	aspect-ratio: 1;
	display: grid;
	place-content: center;
	text-align: center;
	gap: 0.1rem;
	background: var(--gelb);
	color: var(--tinte);
	border: var(--rand-stark);
	border-radius: var(--rund);
	box-shadow: var(--schatten-klein);
	transform: rotate(12deg);
	text-decoration: none;
	line-height: 1.05;
	transition: transform 0.2s ease;
}
.aufkleber:hover { transform: rotate(0deg) scale(1.05); color: var(--tinte); background: var(--gelb); }
.aufkleber__zahl {
	font-family: var(--schrift-anzeige);
	font-weight: 900;
	font-stretch: 65%;
	font-size: clamp(2rem, 7vw, 2.6rem);
	line-height: 0.95;
}
.aufkleber__text {
	font-family: var(--schrift-anzeige);
	font-weight: 800;
	font-stretch: 100%;
	font-size: 0.6rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	padding-inline: 0.55rem;
	hyphens: manual;
}

/* --- Laufband ------------------------------------------------------------
   Die Werte als Streifen zwischen Plakat und Text. Bewegt sich langsam,
   hält beim Darüberfahren an und steht still bei „Bewegung reduzieren“.
   -------------------------------------------------------------------------- */

.laufband {
	background-color: var(--signal);
	background-image: var(--koernung);
	background-blend-mode: multiply;
	border-block: var(--rand-stark);
	overflow: hidden;
	transform: rotate(-1.2deg);
	margin-inline: -2vw;
	position: relative;
	z-index: 1;
}

.laufband__spur {
	display: flex;
	width: max-content;
	animation: laufband 38s linear infinite;
}
.laufband:hover .laufband__spur { animation-play-state: paused; }

.laufband__text {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding: 0.7rem 0.7rem;
	margin: 0;
	white-space: nowrap;
	font-family: var(--schrift-anzeige);
	font-weight: 850;
	font-stretch: 72%;
	font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
	text-transform: uppercase;
	line-height: 1;
}
.laufband__text span::after {
	content: "✺";
	margin-left: 1.4rem;
	font-stretch: 100%;
}

@keyframes laufband {
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.laufband__spur { animation: none; }
}

/* --- 2 Wer wir sind -------------------------------------------------- */

.kurz__innen {
	display: grid;
	gap: var(--r5);
}
@media (min-width: 820px) {
	.kurz__innen { grid-template-columns: minmax(0, 1.55fr) minmax(250px, 0.9fr); gap: var(--r6); align-items: start; }
}

.kurz__text p:first-of-type { font-size: var(--gr-lead); }

.fakten {
	border: var(--rand-stark);
	background: var(--papier);
	box-shadow: var(--schatten);
	transform: rotate(1deg);
}

.fakten__liste { margin: 0; }

.fakten__zeile {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--r2);
	padding: 0.6rem var(--r3);
	border-bottom: var(--rand-stark);
}
.fakten__zeile:last-child { border-bottom: 0; }
.fakten__zeile:nth-child(odd) { background: var(--putz); }
.fakten__zeile dt {
	font-size: var(--gr-klein);
	color: var(--tinte-2);
}
.fakten__zeile dd {
	margin: 0;
	font-family: var(--schrift-anzeige);
	font-size: 1.7rem;
	font-weight: 900;
	font-stretch: 70%;
	font-variant-numeric: lining-nums tabular-nums;
}

/* --- 3 Warum: auf Kobalt ------------------------------------------------ */

.werte__kopf { max-width: 58ch; margin-bottom: var(--r5); }
.werte__lead {
	font-family: var(--schrift-akzent);
	font-style: italic;
	font-size: calc(var(--gr-lead) * 1.35);
	line-height: 1.3;
	margin-bottom: 0;
}

.werte__liste {
	display: grid;
	gap: var(--r5);
	counter-reset: wert;
}
@media (min-width: 760px) {
	/* Absichtlich ungleich breit — kein sauberes Drittelraster. */
	.werte__liste { grid-template-columns: 1.2fr 1fr 1fr; gap: var(--r4); }
}

.wert {
	counter-increment: wert;
	border-top: 3px solid var(--auf-dunkel);
	padding-top: var(--r3);
}
.wert::before {
	content: "0" counter(wert);
	display: block;
	font-family: var(--schrift-anzeige);
	font-weight: 900;
	font-stretch: 62%;
	font-size: clamp(3.5rem, 2rem + 5vw, 5.5rem);
	line-height: 0.85;
	color: var(--gelb);
	margin-bottom: var(--r3);
}

.wert__icon {
	width: 38px;
	height: 38px;
	color: var(--gelb);
	margin-bottom: var(--r2);
	display: none;   /* Die Nummer trägt; die Zeichen bleiben im Markup für später. */
}
.wert__titel {
	font-size: var(--gr-h3);
	font-stretch: 85%;
	text-transform: none;
	margin-bottom: var(--r2);
}
.wert__text { margin: 0; font-size: 0.98rem; }

/* --- 4 Wo wir stehen ------------------------------------------------------
   Bewusst nüchtern. Die Zahl ist die Aussage, der Balken nur Beiwerk.
   Keine Dringlichkeitsfarben, kein Countdown.
   -------------------------------------------------------------------------- */

.stand { padding-block: var(--abschnitt); }

.stand__zahl {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.8rem;
	margin-bottom: var(--r4);
}
.stand__zahl strong {
	font-family: var(--schrift-anzeige);
	font-size: clamp(3rem, 1.4rem + 7vw, 6.5rem);
	font-weight: 900;
	font-stretch: 62%;
	line-height: 0.9;
	font-variant-numeric: lining-nums tabular-nums;
}
.stand__zahl span {
	font-size: var(--gr-lead);
	color: var(--tinte-2);
}

.stand__balken {
	height: 30px;
	background: var(--papier);
	background-image: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(22, 22, 29, 0.12) 7px 9px);
	border: var(--rand-stark);
	border-radius: var(--rund);
	overflow: hidden;
	margin-bottom: var(--r3);
}
.stand__fuellung {
	display: block;
	height: 100%;
	width: var(--anteil, 0%);
	background: var(--kobalt);
	border-right: var(--rand-stark);
}

.stand__meta {
	font-size: var(--gr-klein);
	color: var(--tinte-2);
	font-variant-numeric: tabular-nums;
	margin-bottom: var(--r4);
}

.stand__ziel {
	font-family: var(--schrift-akzent);
	font-style: italic;
	font-size: calc(var(--gr-lead) * 1.3);
	line-height: 1.3;
	max-width: 40ch;
	margin-bottom: 0;
}

/* --- 5 Direktkredit ---------------------------------------------------- */

.risiko {
	border: var(--rand-stark);
	border-radius: var(--radius);
	padding: var(--r3) var(--r4);
	margin-block: var(--r4);
	background: var(--papier);
	box-shadow: 6px 6px 0 var(--signal);
}
.risiko__titel {
	font-size: var(--gr-etikett);
	font-weight: 900;
	font-stretch: 110%;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--signal-text);
	margin-bottom: var(--r2);
}
.risiko p { margin: 0; font-size: 0.97rem; }

/* --- 6 Das läuft gerade ------------------------------------------------ */

.aktuelles__raster {
	display: grid;
	gap: var(--r4);
}
@media (min-width: 900px) {
	.aktuelles__raster { grid-template-columns: 1.35fr 1fr; gap: var(--r5); align-items: start; }
}

.termin-gross {
	border: var(--rand-stark);
	border-radius: var(--radius);
	padding: var(--r4);
	background: var(--papier);
	box-shadow: 8px 8px 0 var(--kobalt);
	display: flex;
	flex-direction: column;
	gap: var(--r3);
}

.termin-gross__label {
	align-self: flex-start;
	font-family: var(--schrift-anzeige);
	font-size: var(--gr-etikett);
	font-weight: 900;
	font-stretch: 110%;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--gelb);
	border: 1.5px solid var(--tinte);
	padding: 0.15rem 0.5rem;
	margin: 0;
}

.termin-gross__innen { display: flex; gap: var(--r4); align-items: flex-start; }
.termin-gross__titel { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.2rem); font-stretch: 78%; margin: 0 0 0.4rem; }
.termin-gross__titel a { color: var(--tinte); text-decoration: none; }
.termin-gross__titel a:hover { background: var(--gelb); }
.termin-gross__meta { font-size: var(--gr-klein); color: var(--tinte-2); margin: 0 0 var(--r2); }
.termin-gross__text p:last-child { margin-bottom: 0; }
.termin-gross__bild { border: var(--rand-stark); aspect-ratio: 16 / 9; }

.aktuelles__news { display: grid; gap: var(--r4); align-content: start; }
.aktuelles__news .karte__bild { display: none; }   /* klein daneben: nur Text */

/* --- 7 Projekte --------------------------------------------------------
   Versetztes Raster: die erste Karte ist breiter als die anderen.
   ----------------------------------------------------------------------- */

.projektraster {
	display: grid;
	gap: var(--r4);
	grid-template-columns: 1fr;
}
@media (min-width: 760px) {
	.projektraster { grid-template-columns: repeat(2, 1fr); gap: var(--r5) var(--r4); }
	/* Bei ungerader Anzahl läuft die erste Karte über beide Spalten.
	   So bleibt das Raster lebendig, ohne je ein Loch zu lassen. */
	.projektraster > *:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
	/* Jede zweite Karte rutscht ein Stück nach unten. */
	.projektraster > :nth-child(even) { transform: translateY(var(--r4)); }
	.projektraster > :nth-child(even):hover { transform: translate(-2px, calc(var(--r4) - 2px)); }
}

/* --- 8 Menschen: Fotos mit Klebeband ------------------------------------- */

.menschen__kopf { max-width: 56ch; margin-bottom: var(--r5); }
.menschen__lead { font-size: var(--gr-lead); color: var(--tinte-2); margin-bottom: 0; }

.menschenraster {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--r5) var(--r4);
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 560px) { .menschenraster { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .menschenraster { grid-template-columns: repeat(4, 1fr); } }

.mensch { margin: 0; }

.mensch__bild {
	position: relative;
	border: var(--rand-stark);
	aspect-ratio: 4 / 5;
	background: var(--putz);
	margin-bottom: var(--r3);
	transform: rotate(var(--kippung, 0deg));
	transition: transform 0.25s ease;
	display: grid;
	place-items: center;
	box-shadow: var(--schatten-klein);
}
.mensch:hover .mensch__bild { transform: rotate(0deg); }

/* Klebeband oben — halbdurchsichtig wie echtes Kreppband. */
.mensch__bild::before {
	content: "";
	position: absolute;
	top: -12px;
	left: 50%;
	z-index: 2;
	width: 44%;
	height: 22px;
	background: rgba(255, 216, 74, 0.82);
	transform: translateX(-50%) rotate(calc(var(--kippung, 0deg) * -4));
	box-shadow: 0 1px 0 rgba(22, 22, 29, 0.15);
}

.mensch__bild .duoton { position: absolute; inset: 0; }

.mensch__platzhalter {
	font-family: var(--schrift-anzeige);
	font-weight: 900;
	font-stretch: 62%;
	font-size: 4.5rem;
	color: var(--kobalt);
}
.mensch:nth-child(3n+2) .mensch__bild { background: var(--gelb); }
.mensch:nth-child(3n+3) .mensch__bild { background: var(--signal); }
.mensch:nth-child(3n+3) .mensch__platzhalter { color: var(--tinte); }

.mensch__name {
	font-size: 1.15rem;
	font-stretch: 85%;
	margin: 0 0 0.15rem;
}
.mensch__rolle {
	font-family: var(--schrift-anzeige);
	font-size: var(--gr-etikett);
	font-weight: 800;
	font-stretch: 105%;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--signal-text);
	margin: 0 0 0.35rem;
}
.mensch__text { font-size: var(--gr-klein); color: var(--tinte-2); margin: 0; }

/* --- 9 Mitmachen: auf Signal ----------------------------------------------- */

.mitmachen__kopf { max-width: 52ch; margin-bottom: var(--r5); }
.mitmachen__lead { font-size: var(--gr-lead); margin-bottom: 0; }

.wege {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--r4);
}
@media (min-width: 760px) {
	.wege { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
	.wege { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

.weg {
	position: relative;
	margin: 0;
	padding: var(--r3) var(--r3) var(--r4);
	background: var(--papier);
	border: var(--rand-stark);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.weg:hover { transform: translate(-2px, -2px) rotate(-0.6deg); box-shadow: 7px 7px 0 var(--tinte); }
.weg--betont { background: var(--tinte); color: var(--papier); }
.weg--betont .weg__titel a { color: var(--gelb); }

.weg__titel {
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
	font-stretch: 72%;
	text-transform: uppercase;
	margin-bottom: var(--r2);
}
.weg__titel a { text-decoration: none; }
.weg__titel a::after { content: " →"; }
.weg__titel a:hover { background: none; }
/* Die ganze Karte ist anklickbar. */
.weg__titel a::before { content: ""; position: absolute; inset: 0; }
.weg__text { margin: 0; font-size: 0.95rem; }