/*
 * [pio_presse] – Presse-Uebersicht im Zickzack, Ersatz fuer die handgebauten Divi-Reihen auf /presse/.
 * Vorbild /presse/ live, gemessen 30.09.2026 (1440 / 820 / 390):
 * - Je Eintrag zwei gleich hohe Haelften ohne Luecke: weisser Textkasten (60 px Innenabstand)
 *   und Bild; abwechselnd Text links / Bild links. Zwischen den Eintraegen 54 px.
 * - Ueberschrift 26 px / 700 / 1,4 schwarz, 10 px Abstand; Text 16 px / 600 / 1,8 #666;
 *   Button "MEHR LESEN" gruen #7cda24, 16 px / 700 weiss, eckig, ohne Hover-Effekt (wie live).
 * - Tablet/Handy gestapelt. Abweichend von live (Vorschlag 30.09.): Bild immer oben,
 *   Handy 24 px Innenabstand und groessere Schrift (live 192 px Textbreite bei 13 px). Freigabe Daniel 30.09.
 */

.pio-presse {
	display: flex;
	flex-direction: column;
	gap: 54px;
}

.pio-presse__eintrag {
	display: flex;
	align-items: stretch;
}

.pio-presse__eintrag--bild-links {
	flex-direction: row-reverse;
}

.pio-presse__text,
.pio-presse__bild {
	box-sizing: border-box;
	width: 50%;
}

.pio-presse__text {
	padding: 60px;
	background: #fff;
}

.pio-presse__eintrag--ohne-bild .pio-presse__text {
	width: 100%;
}

/* Bild und Textkasten immer gleich hoch (Daniel 30.09.2026: auf der Testseite blieb bei
   langen Texten eine schwarze Luecke unter dem Bild). Die Bildspalte streckt sich auf die
   Reihenhoehe (Flex), das Bild streckt sich mit und fuellt per object-fit: cover. Die
   Reihenhoehe ist die groessere von Texthoehe und natuerlicher Bildhoehe: ist der Text
   hoeher, waechst das Bild mit (seitlich beschnitten); ist das Bild hoeher, wird der
   weisse Kasten laenger wie live. */
.pio-presse__bild {
	display: flex;
}

.pio-presse__bild img {
	display: block;
	align-self: stretch;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.pio-presse .pio-presse__titel {
	margin: 0;
	padding: 0 0 10px;
	font-family: inherit;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.4;
	color: #000;
}

.pio-presse .pio-presse__teaser {
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.8;
	color: #666;
}

.pio-presse .pio-presse__teaser p {
	margin: 0;
	padding: 0 0 1em;
}

.pio-presse .pio-presse__teaser p:last-child {
	padding-bottom: 0;
}

.pio-presse .pio-presse__button {
	display: inline-block;
	padding: 0.3em 1em;
	border: 10px solid #7cda24;
	border-radius: 0;
	background: #7cda24;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
	color: #fff;
	text-decoration: none;
}

.pio-presse .pio-presse__button:hover,
.pio-presse .pio-presse__button:focus {
	color: #fff;
	background: #7cda24;
}

/* ---------------------------------------------------------------- Tablet + Handy */

@media (max-width: 980px) {
	.pio-presse {
		gap: 60px;
	}

	.pio-presse__eintrag,
	.pio-presse__eintrag--bild-links {
		flex-direction: column-reverse; /* Bild immer oben (DOM: Text, Bild) */
	}

	.pio-presse__text,
	.pio-presse__bild {
		width: 100%;
	}
}

@media (max-width: 767px) {
	.pio-presse__text {
		padding: 24px; /* Daniel 30.09.: Text auf dem Handy breiter (live 60 px) */
	}

	.pio-presse .pio-presse__titel {
		font-size: 20px;
	}

	.pio-presse .pio-presse__teaser {
		font-size: 15px;
	}
}