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

/* ---------------------------------------------------------------
   ZERTIFIKATLEISTE
   Aufbau:  .ddm_zertifikatleiste (grauer Vollbreitenstreifen)
              > .main-container.wide.zert_viewport
                > .zert_arrow (2x, nur bei Ueberlauf)
                > .zert_fade  (2x, Verlauf an den Kanten)
                > .zert_track > .zert_item > .zert_media > img + .zert_tip

   Die Logos laufen auf einer gemeinsamen Hoehe (--zert-logo-height,
   aus den Modulparametern) mit automatischer Breite. Passen alle in
   eine Zeile, steht die Reihe zentriert; laeuft sie ueber, schaltet
   das Skript auf linksbuendig und blendet die Pfeile ein.
   --------------------------------------------------------------- */
.ddm_zertifikatleiste{
	/* Fallback, falls das Modul ohne Inline-Style gerendert wird. */
	--zert-logo-height: 60px;
	--zert-bg: var(--c-lg, #f6f6f6);
	--zert-gap: 70px;
	--zert-arrow-size: 44px;
	/* Platz, den die Pfeile am Rand der scrollenden Reihe freihalten. */
	--zert-arrow-space: 62px;

	position: relative;
	width: 100%;
	background-color: var(--zert-bg);
	padding-top: 46px;
	padding-bottom: 46px;
	overflow: hidden;
}

.ddm_zertifikatleiste .zert_viewport{
	position: relative;
}

/* Die Reihe -------------------------------------------------- */
.ddm_zertifikatleiste .zert_track{
	display: flex;
	align-items: center;
	gap: var(--zert-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	/* Gescrollt wird ueber die Pfeile, die Systemleiste bleibt aus. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	justify-content: center;
	justify-content: safe center;
}
.ddm_zertifikatleiste .zert_track::-webkit-scrollbar{
	display: none;
}
/* Bei Ueberlauf linksbuendig, sonst waere der Anfang nicht erreichbar. Das
   Innenabstandspaar haelt das erste und letzte Logo unter den Pfeilen hervor. */
.ddm_zertifikatleiste .zert_track.is_scrollable{
	justify-content: flex-start;
	padding-left: var(--zert-arrow-space);
	padding-right: var(--zert-arrow-space);
	scroll-padding-left: var(--zert-arrow-space);
	scroll-padding-right: var(--zert-arrow-space);
}
.ddm_zertifikatleiste .zert_track.is_scrollable:focus-visible{
	outline: 2px solid var(--c-blue, #2b2d7a);
	outline-offset: 6px;
}

.ddm_zertifikatleiste .zert_item{
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Logo ------------------------------------------------------- */
.ddm_zertifikatleiste .zert_media{
	display: block;
	position: relative;
	line-height: 0;
	text-decoration: none;
	/* Anklickbare Logos sind <button>, deshalb der Elementreset. */
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}
.ddm_zertifikatleiste .zert_img{
	display: block;
	height: var(--zert-logo-height);
	width: auto;
	max-width: none;
	object-fit: contain;
	/* Viele Zertifikatsgrafiken liegen als JPEG/PNG mit weisser Flaeche vor.
	   Multiply laesst dieses Weiss im hellen Grau der Leiste verschwinden und
	   veraendert die Logos selbst praktisch nicht. Bei dunklem Hintergrund
	   muesste die Zeile entfallen. */
	mix-blend-mode: multiply;
	transition: transform .2s ease;
}
/* Nur Logos mit Overlay reagieren. Die Transformation sitzt bewusst auf dem
   Bild und nicht auf .zert_media - ein transformierter Vorfahre wuerde die
   fix positionierte Sprechblase an sich binden und wieder abschneiden. */
.ddm_zertifikatleiste button.zert_media{
	cursor: pointer;
}
.ddm_zertifikatleiste button.zert_media:hover .zert_img,
.ddm_zertifikatleiste button.zert_media:focus-visible .zert_img{
	transform: translateY(-3px);
}
.ddm_zertifikatleiste button.zert_media:focus-visible{
	outline: 2px solid var(--c-blue, #2b2d7a);
	outline-offset: 8px;
	border-radius: 2px;
}

/* Tooltip ---------------------------------------------------- */
/* position:fixed, damit die Blase nicht am Ueberlauf der Reihe abgeschnitten
   wird. Position und Pfeilspitze setzt das Skript ueber die Custom Properties. */
.ddm_zertifikatleiste .zert_tip{
	position: fixed;
	left: var(--tip-x, 0);
	top: var(--tip-y, 0);
	z-index: 60;
	transform: translateY(-100%);
	max-width: 260px;
	padding: 8px 13px;
	border-radius: 4px;
	background-color: var(--c-blue, #2b2d7a);
	color: #ffffff;
	font-family: var(--font-base, "Open Sans", sans-serif);
	font-stretch: var(--width-normal, 100%);
	font-weight: var(--weight-regular, 400);
	font-size: 13px;
	line-height: 1.35;
	letter-spacing: .01em;
	text-align: center;
	white-space: normal;
	box-shadow: 0 6px 18px rgba(43, 45, 122, .22);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease;
}
.ddm_zertifikatleiste .zert_tip::after{
	content: "";
	position: absolute;
	left: var(--tip-arrow-x, 50%);
	bottom: -4px;
	width: 9px;
	height: 9px;
	margin-left: -4.5px;
	background-color: inherit;
	transform: rotate(45deg);
	border-radius: 1px;
}
.ddm_zertifikatleiste .zert_tip.is_visible{
	opacity: 1;
	visibility: visible;
}
/* Kein Platz oberhalb: Blase klappt unter das Logo, Spitze wandert nach oben. */
.ddm_zertifikatleiste .zert_tip.is_below{
	transform: translateY(0);
}
.ddm_zertifikatleiste .zert_tip.is_below::after{
	bottom: auto;
	top: -4px;
}

/* Kantenverlauf ---------------------------------------------- */
.ddm_zertifikatleiste .zert_fade{
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
}
.ddm_zertifikatleiste .zert_fade_start{
	left: 0;
	background: linear-gradient(to right, var(--zert-bg) 45%, rgba(246, 246, 246, 0));
}
.ddm_zertifikatleiste .zert_fade_end{
	right: 0;
	background: linear-gradient(to left, var(--zert-bg) 45%, rgba(246, 246, 246, 0));
}
.ddm_zertifikatleiste .zert_viewport.can_prev .zert_fade_start,
.ddm_zertifikatleiste .zert_viewport.can_next .zert_fade_end{
	opacity: 1;
}

/* Pfeile ----------------------------------------------------- */
.ddm_zertifikatleiste .zert_arrow{
	position: absolute;
	top: 50%;
	z-index: 3;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--zert-arrow-size);
	height: var(--zert-arrow-size);
	padding: 0;
	border: 1px solid var(--c-g, #c7cdcf);
	border-radius: 50%;
	background-color: #ffffff;
	color: var(--c-blue, #2b2d7a);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.ddm_zertifikatleiste .zert_arrow[hidden]{
	display: none;
}
.ddm_zertifikatleiste .zert_arrow_prev{
	left: 0;
}
.ddm_zertifikatleiste .zert_arrow_next{
	right: 0;
}
.ddm_zertifikatleiste .zert_arrow svg{
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ddm_zertifikatleiste .zert_arrow:hover:not(:disabled),
.ddm_zertifikatleiste .zert_arrow:focus-visible{
	background-color: var(--c-blue, #2b2d7a);
	border-color: var(--c-blue, #2b2d7a);
	color: #ffffff;
}
.ddm_zertifikatleiste .zert_arrow:focus-visible{
	outline: 2px solid var(--c-blue, #2b2d7a);
	outline-offset: 3px;
}
.ddm_zertifikatleiste .zert_arrow:disabled{
	opacity: .3;
	cursor: default;
	box-shadow: none;
}

/* ---------------------------------------------------------------
   RASTER (Layout "grid")
   Dieselben Eintraege als Kachelraster fuer die Auszeichnungsseiten.
   Der Beitrag rendert die Modulinstanz damit an Ort und Stelle, den
   Hintergrund liefert der umgebende Abschnitt - hier wird keiner gesetzt.
   Kachel und Bezeichnung liegen in einem gemeinsamen Bedienelement.
   --------------------------------------------------------------- */
/* Kachelmasse aus dem Layout abgemessen (kundendaten/05_Auszeichnungen/
   01_Template/Lorenz_WEB_Auszeichnungen.jpg): Kachel 323 x 212 px im 1324er
   Container, 11 px Abstand, das Logo rund ein Drittel der Kachelhoehe hoch und
   hoechstens gut drei Viertel der Kachel breit. Als Prozentwerte notiert, damit
   Kachel und Logo in jeder Spaltenzahl dasselbe Verhaeltnis behalten. */
.ddm_zertifikatraster{
	--zert-tile-gap: 11px;
	--zert-tile-ratio: 1.53;
	--zert-tile-logo-height: 33%;
	--zert-tile-logo-width: 78%;
}
.ddm_zertifikatraster .zert_grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: var(--zert-tile-gap);
	row-gap: 46px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ddm_zertifikatraster .zert_grid_item{
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Elementreset - anklickbare Eintraege sind <button>. */
.ddm_zertifikatraster .zert_grid_entry{
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	-webkit-appearance: none;
	appearance: none;
}
.ddm_zertifikatraster button.zert_grid_entry{
	cursor: pointer;
}
.ddm_zertifikatraster button.zert_grid_entry:focus-visible{
	outline: 2px solid var(--c-blue, #2b2d7a);
	outline-offset: 4px;
}

/* Kachel */
.ddm_zertifikatraster .zert_grid_tile{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: var(--zert-tile-ratio);
	background-color: #ffffff;
	transition: box-shadow .2s ease;
}
.ddm_zertifikatraster button.zert_grid_entry:hover .zert_grid_tile{
	box-shadow: 0 6px 20px rgba(43, 45, 122, .13);
}
/* Kein festes Mass: die beiden Obergrenzen halten das Logo im Verhaeltnis der
   Kachel, breite Banner begrenzt die Breite, alle uebrigen die Hoehe. */
.ddm_zertifikatraster .zert_grid_img{
	display: block;
	width: auto;
	height: auto;
	max-width: var(--zert-tile-logo-width);
	max-height: var(--zert-tile-logo-height);
	object-fit: contain;
}

/* Bezeichnung unter der Kachel */
.ddm_zertifikatraster .zert_grid_label{
	display: inline-block;
	position: relative;
	margin-top: 18px;
	color: var(--c-blue, #2b2d7a);
	font-size: 16px;
	line-height: 22px;
}
.ddm_zertifikatraster .zert_grid_arrow{
	margin-right: .4em;
}
/* Unterstrich wie .linehover_links, das dortige Regelwerk greift nur auf a. */
.ddm_zertifikatraster button.zert_grid_entry .zert_grid_label::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .25s ease;
}
.ddm_zertifikatraster button.zert_grid_entry:hover .zert_grid_label::after,
.ddm_zertifikatraster button.zert_grid_entry:focus-visible .zert_grid_label::after{
	transform: scaleX(1);
}

@media only screen and (max-width: 1320px){
	.ddm_zertifikatraster .zert_grid{
		grid-template-columns: repeat(3, 1fr);
	}
}
@media only screen and (max-width: 860px){
	.ddm_zertifikatraster .zert_grid{
		grid-template-columns: repeat(2, 1fr);
		row-gap: 34px;
	}
}
@media only screen and (max-width: 500px){
	.ddm_zertifikatraster .zert_grid{
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce){
	.ddm_zertifikatraster .zert_grid_tile,
	.ddm_zertifikatraster .zert_grid_label::after{
		transition: none;
	}
}
/* ---------------------------------------------------------------
   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_zertifikatleiste haengen.
   --------------------------------------------------------------- */
.zert_modal{
	--zert-modal-media-pad: 44px;
}

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

/* Bildbereich: weisse Flaeche mit dem Logo, unten die Welle aus dem Layout. */
.zert_modal .zert_modal_media{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: var(--zert-modal-media-pad) var(--zert-modal-media-pad) 62px;
	background-color: #ffffff;
}
.zert_modal .zert_modal_logo{
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 130px;
}
/* Die Welle behaelt ihr Seitenverhaeltnis (viewBox 1000 x 30), damit sie in
   jeder Breite so flach bleibt wie im Layout. */
.zert_modal .zert_modal_wave{
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	line-height: 0;
	pointer-events: none;
}
.zert_modal .zert_modal_wave svg{
	display: block;
	width: 100%;
	height: auto;
}
.zert_modal .zert_modal_wave path{
	fill: var(--c-lg, #f6f6f6);
}

/* Titel und Editorinhalt */
.zert_modal .zert_modal_title{
	margin: 32px 0 20px;
	font-size: 24px;
	line-height: 30px;
	text-transform: uppercase;
}
.zert_modal .zert_modal_text{
	font-size: 16px;
	line-height: 26px;
}
.zert_modal .zert_modal_text > *:first-child{
	margin-top: 0;
}
.zert_modal .zert_modal_text > *:last-child{
	margin-bottom: 0;
}
.zert_modal .zert_modal_text img{
	max-width: 100%;
	height: auto;
}
.zert_modal .zert_modal_text iframe,
.zert_modal .zert_modal_text video{
	max-width: 100%;
}

@media only screen and (max-width: 600px){
	.zert_modal{
		--zert-modal-media-pad: 26px;
	}
	.zert_modal .zert_modal_media{
		min-height: 150px;
		padding-bottom: 48px;
	}
	.zert_modal .zert_modal_logo{
		max-height: 100px;
	}
	.zert_modal .zert_modal_title{
		margin-top: 26px;
		font-size: 21px;
		line-height: 27px;
	}
}

/* Responsive -------------------------------------------------- */
@media only screen and (max-width: 1320px){
	.ddm_zertifikatleiste{
		--zert-gap: 55px;
	}
}
@media only screen and (max-width: 860px){
	.ddm_zertifikatleiste{
		--zert-gap: 40px;
		--zert-arrow-size: 38px;
		--zert-arrow-space: 52px;
		padding-top: 36px;
		padding-bottom: 36px;
	}
	.ddm_zertifikatleiste .zert_img{
		height: calc(var(--zert-logo-height) * .85);
	}
	.ddm_zertifikatleiste .zert_fade{
		width: 80px;
	}
}
@media only screen and (max-width: 600px){
	.ddm_zertifikatleiste{
		--zert-gap: 30px;
		--zert-arrow-size: 34px;
		--zert-arrow-space: 46px;
		padding-top: 30px;
		padding-bottom: 30px;
	}
	.ddm_zertifikatleiste .zert_img{
		height: calc(var(--zert-logo-height) * .75);
	}
	.ddm_zertifikatleiste .zert_tip{
		max-width: 200px;
	}
}

@media (prefers-reduced-motion: reduce){
	.ddm_zertifikatleiste .zert_track{
		scroll-behavior: auto;
	}
	.ddm_zertifikatleiste .zert_img,
	.ddm_zertifikatleiste .zert_tip,
	.ddm_zertifikatleiste .zert_fade,
	.ddm_zertifikatleiste .zert_arrow{
		transition: none;
	}
}

@media print{
	.ddm_zertifikatleiste .zert_arrow,
	.ddm_zertifikatleiste .zert_fade,
	.ddm_zertifikatleiste .zert_tip{
		display: none;
	}
	.ddm_zertifikatleiste .zert_track{
		flex-wrap: wrap;
		overflow: visible;
	}
}