/*
Lorenz Meters - News Modul (mod_ddm_news)
creation Date: 2026-09-08
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

/* ---------------------------------------------------------------
   NEWS - KARTEN
   Aufbau:  .ddm_news
              > .main-container.narrow
                > .news_grid > .news_item > .news_card
                    > .news_card_media > img + .news_card_icon
                    > .news_card_body   > .news_card_wave
                                        + .news_card_meta
                                        + .news_card_title
                                        + .news_card_button
                > .news_all (nur auf der Startseite)

   Alle Masse sind aus kundendaten/04_News_und_Presse/01_Template/
   Lorenz_WEB_Newsarchiv.jpg abgemessen (7938 px Breite = 1920 CSS px,
   die Kartenreihe ist damit 1124 px breit - der narrow-Container).
   Die Kategorie ist der einzige Schalter fuer die Farbe: sie setzt die
   Farbklasse des Templates auf .news_card_body und faerbt damit Block,
   Welle und Beschriftung des Buttons.
   --------------------------------------------------------------- */
.ddm_news{
	/* Die leere Bildflaeche nimmt den Gegenton ihrer Umgebung an: grau auf
	   der weissen Startseite, weiss im grauen Band der Newsseite. Genau so
	   zeigen es die beiden Layouts. */
	--news-media-bg: var(--c-lg, #f6f6f6);
	--news-card-pad: 40px;
	--news-icon-top: 30px;
	--news-icon-left: 32px;

	position: relative;
	width: 100%;
}
.lg_bg .ddm_news,
.ddm_news.on_lg{
	--news-media-bg: #ffffff;
}

/* Die Reihe ---------------------------------------------------- */
.ddm_news .news_grid{
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ddm_news .news_item{
	display: flex;
	flex: 1 1 0px;
	min-width: 0px;
	/* .contstyles li setzt Abstaende - die gelten hier nicht. */
	margin: 0;
}

/* Die Karte ist ein einziges Bedienelement - als <button> braucht sie den
   Elementreset. Sie waechst in der Hoehe mit der laengsten Ueberschrift der
   Reihe, der Button unten haengt sich per margin-top:auto an die Unterkante,
   damit die Beschriftungen aller drei Karten auf einer Linie stehen. */
.ddm_news .news_card{
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-stretch: inherit;
	text-align: left;
	overflow: hidden;
	-webkit-appearance: none;
	appearance: none;
}
.ddm_news button.news_card{
	cursor: pointer;
}
.ddm_news button.news_card:focus-visible{
	outline: 2px solid var(--c-blue, #2b2d7a);
	outline-offset: 3px;
}

/* Bildflaeche: 367 x 478 aus dem Layout. Das Bild deckt sie immer
   vollstaendig ab, das Seitenverhaeltnis des Motivs spielt keine Rolle. */
.ddm_news .news_card_media{
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 367 / 478;
	background-color: var(--news-media-bg);
	overflow: hidden;
}
.ddm_news .news_card_img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 400ms ease;
}
.ddm_news button.news_card:hover .news_card_img,
.ddm_news button.news_card:focus-visible .news_card_img{
	transform: scale(1.04);
}
/* Das Icon liegt in der oberen linken Ecke der Bildflaeche und behaelt
   seine Zeichengroesse (viewBox 24 x 34.4). */
.ddm_news .news_card_icon{
	position: absolute;
	top: var(--news-icon-top);
	left: var(--news-icon-left);
	z-index: 2;
	display: block;
	width: 24px;
	height: auto;
}

/* Der farbige Block. Die Welle sitzt auf seiner Oberkante und ragt in die
   Bildflaeche hinein - bottom:100% stellt sie genau darueber, ihre Hoehe
   ergibt sich aus der viewBox (3 % der Breite). */
.ddm_news .news_card_body{
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	box-sizing: border-box;
	padding: 46px var(--news-card-pad) var(--news-card-pad);
}
.ddm_news .news_card_wave{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	margin-bottom: -1px;
	line-height: 0;
	pointer-events: none;
}
.ddm_news .news_card_wave svg{
	display: block;
	width: 100%;
	height: auto;
}
/* Die Welle traegt die Farbe des Blocks - currentColor waere die
   Schriftfarbe, deshalb der Umweg ueber die Hintergrundfarbe der Klasse. */
.ddm_news .grn_bg .news_card_wave path{
	fill: var(--c-grn, #95bb20);
}
.ddm_news .blue_bg .news_card_wave path{
	fill: var(--c-blue, #2b2d7a);
}

.ddm_news .news_card_meta{
	display: block;
	font-size: 16px;
	line-height: 22px;
}
.ddm_news .news_card_title{
	display: block;
	margin-top: 4px;
	margin-bottom: 20px;
	font-family: var(--font-base);
	font-stretch: var(--width-condensed);
	font-weight: var(--weight-bold);
	font-size: 28px;
	line-height: 28px;
}
/* Sieht aus wie .contentbutton, ist aber ein span: ein Button im Button
   waere ungueltiges Markup. Der Radius ist der des Templates. */
.ddm_news .news_card_button{
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding: 7px 24px;
	border-radius: 6px;
	font-family: var(--font-bold);
	font-stretch: var(--width-normal);
	font-weight: var(--weight-bold);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	transition: box-shadow 300ms ease;
}
.ddm_news button.news_card:hover .news_card_button,
.ddm_news button.news_card:focus-visible .news_card_button{
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
}

/* Die Leiste "Alle Beitraege" ---------------------------------
   Halb so breit wie die Kartenreihe, mit der blauen Kante darueber. */
.ddm_news .news_all{
	width: 50%;
	margin-top: 50px;
}
.ddm_news .news_all_link{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	border-top: 6px solid var(--c-blue, #2b2d7a);
	padding: 10px 12px 0px 20px;
	text-decoration: none;
}
.ddm_news .news_all_link:hover,
.ddm_news .news_all_link:focus-visible{
	text-decoration: none;
}
.ddm_news .news_all_link::after{
	display: none !important;
}
.ddm_news .news_all_label{
	font-family: var(--font-base);
	font-stretch: var(--width-condensed);
	font-weight: var(--weight-bold);
	font-size: 21px;
	line-height: 28px;
}
.ddm_news .news_all_arrow{
	flex: 0 0 auto;
	width: 27px;
	height: auto;
	transform: translateX(0px);
	transition: transform 300ms ease;
}
.ddm_news .news_all_link:hover .news_all_arrow,
.ddm_news .news_all_link:focus-visible .news_all_arrow{
	transform: translateX(7px);
}


/* ---------------------------------------------------------------
   NEWS - ARCHIV
   Aufbau:  .ddm_news_archive > .main-container
              > .news_archive_list > .news_archive_item
                > .news_archive_row (Rahmen in der Farbe der Kategorie)
                  > .news_archive_text > .news_archive_meta + _title
                  + .news_archive_arrow

   Volle Containerbreite, 157 px hohe Zeilen im Abstand von 28 px.
   Rahmen und Pfeil folgen beide der Kategorie; das Layout zeichnet sie
   uneinheitlich, die Regel ist so aber lesbar.
   --------------------------------------------------------------- */
.ddm_news_archive{
	--news-row-pad-y: 42px;
	--news-row-pad-l: 53px;
	--news-row-pad-r: 40px;

	position: relative;
	width: 100%;
}
.ddm_news_archive .news_archive_list{
	display: flex;
	flex-direction: column;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ddm_news_archive .news_archive_item{
	/* .contstyles li setzt Abstaende - die gelten hier nicht. */
	margin: 0;
}
.ddm_news_archive .news_archive_row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: var(--news-row-pad-y) var(--news-row-pad-r) var(--news-row-pad-y) var(--news-row-pad-l);
	/* Kein border-Kurzform: die wuerde border-color auf currentColor setzen
	   und die Farbklasse .grn_border / .blue_border der Zeile ueberschreiben. */
	border-width: 2px;
	border-style: solid;
	border-radius: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-stretch: inherit;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
}
.ddm_news_archive button.news_archive_row{
	cursor: pointer;
	transition: background-color 300ms ease;
}
.ddm_news_archive button.news_archive_row:hover{
	background-color: rgba(255, 255, 255, 0.55);
}
.ddm_news_archive button.news_archive_row:focus-visible{
	outline: 2px solid var(--c-blue, #2b2d7a);
	outline-offset: 3px;
}
.ddm_news_archive .news_archive_text{
	display: block;
	min-width: 0px;
}
.ddm_news_archive .news_archive_meta{
	display: block;
	font-size: 16px;
	line-height: 22px;
}
.ddm_news_archive .news_archive_title{
	display: block;
	margin-top: 3px;
	font-family: var(--font-base);
	font-stretch: var(--width-condensed);
	font-weight: var(--weight-bold);
	font-size: 38px;
	line-height: 44px;
}
.ddm_news_archive .news_archive_arrow{
	flex: 0 0 auto;
	width: 37px;
	height: auto;
	transform: translateX(0px);
	transition: transform 300ms ease;
}
.ddm_news_archive button.news_archive_row:hover .news_archive_arrow,
.ddm_news_archive button.news_archive_row:focus-visible .news_archive_arrow{
	transform: translateX(7px);
}


/* ---------------------------------------------------------------
   NEWS - OVERLAY
   Rahmen, Schliessen-Button und Hintergrund kommen aus den
   ddm_modal-Klassen des Templates; hier steht nur der Inhalt.
   Achtung: functions.js haengt jedes .ddm_modal an <body>, die Regeln
   duerfen deshalb nicht unter .ddm_news haengen.

   Aufbau wie im Overlay der Zertifikatleiste, nur mit Bild statt Logo:
   Datum und Titel tragen die Farbe der Kategorie, der Fliesstext bleibt
   blau (kundendaten/04_News_und_Presse/01_Template/
   Lorenz_WEB_Newsbeitrag.jpg).
   --------------------------------------------------------------- */
.news_modal{
	--news-modal-icon-inset: 30px;
}

/* Der Schliessen-Button ist im Template als Kreis mit Zeichen angelegt,
   als <button> braucht er nur den Elementreset. */
.news_modal .ddm_modal_close{
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-blue, #2b2d7a);
	font-family: inherit;
}
.news_modal .ddm_modal_close:focus-visible{
	outline: 2px solid var(--c-blue, #2b2d7a);
	outline-offset: 2px;
}

/* Bildbereich: weisse Flaeche, das Bild deckt sie ab, unten die Welle. */
.news_modal .news_modal_media{
	position: relative;
	width: 100%;
	aspect-ratio: 2 / 1;
	background-color: #ffffff;
	overflow: hidden;
}
.news_modal .news_modal_img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.news_modal .news_modal_icon{
	position: absolute;
	top: var(--news-modal-icon-inset);
	left: var(--news-modal-icon-inset);
	z-index: 2;
	display: block;
	width: 24px;
	height: auto;
}
/* Die Welle behaelt ihr Seitenverhaeltnis (viewBox 1000 x 30), damit sie in
   jeder Breite so flach bleibt wie im Layout. */
.news_modal .news_modal_wave{
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 2;
	line-height: 0;
	pointer-events: none;
}
.news_modal .news_modal_wave svg{
	display: block;
	width: 100%;
	height: auto;
}
.news_modal .news_modal_wave path{
	fill: var(--c-lg, #f6f6f6);
}

/* Datum, Titel und Editorinhalt */
.news_modal .news_modal_meta{
	margin: 26px 0px 0px;
	font-size: 16px;
	line-height: 22px;
}
.news_modal .news_modal_title{
	margin: 4px 0px 20px;
	font-size: 24px;
	line-height: 30px;
	text-transform: uppercase;
}
.news_modal .news_modal_text{
	font-size: 16px;
	line-height: 26px;
}
.news_modal .news_modal_text > *:first-child{
	margin-top: 0;
}
.news_modal .news_modal_text > *:last-child{
	margin-bottom: 0;
}
.news_modal .news_modal_text img{
	max-width: 100%;
	height: auto;
}
.news_modal .news_modal_text iframe,
.news_modal .news_modal_text video{
	max-width: 100%;
}


/* ---------------------------------------------------------------
   RESPONSIVE
   Breakpoints wie im Template: 1320 / 860 / 600 / 500.
   Die Karten stehen zu dritt, ab 860 zu zweit, ab 600 einzeln - drei
   Spalten waeren dort schmaler als die Ueberschrift lang ist.
   --------------------------------------------------------------- */
@media only screen and (max-width: 1320px){
	.ddm_news{
		--news-card-pad: 30px;
		--news-icon-top: 24px;
		--news-icon-left: 24px;
	}
	.ddm_news .news_card_body{
		padding-top: 38px;
	}
	.ddm_news .news_card_title{
		font-size: 25px;
		line-height: 26px;
	}
	.ddm_news .news_all{
		margin-top: 40px;
	}
	.ddm_news_archive{
		--news-row-pad-y: 34px;
		--news-row-pad-l: 40px;
		--news-row-pad-r: 34px;
	}
	.ddm_news_archive .news_archive_list{
		gap: 22px;
	}
	.ddm_news_archive .news_archive_title{
		font-size: 32px;
		line-height: 38px;
	}
}

@media only screen and (max-width: 860px){
	.ddm_news .news_item{
		flex: 0 0 calc(50% - 6px);
	}
	.ddm_news .news_all{
		width: 100%;
		margin-top: 34px;
	}
	.ddm_news .news_all_label{
		font-size: 19px;
		line-height: 25px;
	}
	.ddm_news_archive{
		--news-row-pad-y: 28px;
		--news-row-pad-l: 30px;
		--news-row-pad-r: 26px;
	}
	.ddm_news_archive .news_archive_row{
		gap: 20px;
	}
	.ddm_news_archive .news_archive_title{
		font-size: 28px;
		line-height: 33px;
	}
	.ddm_news_archive .news_archive_arrow{
		width: 30px;
	}
	.news_modal .news_modal_media{
		aspect-ratio: 16 / 9;
	}
}

@media only screen and (max-width: 600px){
	.ddm_news .news_item{
		flex: 0 0 100%;
	}
	/* Ueber die volle Breite waere die hochformatige Bildflaeche des
	   Layouts hoeher als der Bildschirm - hier liegt sie quer. */
	.ddm_news .news_card_media{
		aspect-ratio: 4 / 3;
	}
	.ddm_news .news_card_body{
		padding-top: 34px;
	}
	.ddm_news .news_card_title{
		font-size: 23px;
		line-height: 25px;
	}
	.ddm_news_archive .news_archive_title{
		font-size: 24px;
		line-height: 29px;
	}
	.ddm_news_archive .news_archive_arrow{
		width: 26px;
	}
	.news_modal{
		--news-modal-icon-inset: 20px;
	}
	.news_modal .news_modal_meta{
		margin-top: 20px;
	}
	.news_modal .news_modal_title{
		font-size: 21px;
		line-height: 27px;
	}
}

@media only screen and (max-width: 500px){
	.ddm_news{
		--news-card-pad: 24px;
		--news-icon-top: 20px;
		--news-icon-left: 20px;
	}
	.ddm_news .news_card_body{
		padding-top: 30px;
	}
	.ddm_news_archive{
		--news-row-pad-y: 22px;
		--news-row-pad-l: 22px;
		--news-row-pad-r: 20px;
	}
	.ddm_news_archive .news_archive_row{
		gap: 14px;
	}
	.ddm_news_archive .news_archive_title{
		font-size: 21px;
		line-height: 26px;
	}
	.ddm_news_archive .news_archive_arrow{
		width: 22px;
	}
}