/* =============================================================================
 * MotionMatters — Inhaltselemente
 *
 * Deckt zunächst Contaos eigene Elementklassen ab (ce_text, ce_image, …).
 * Die Gestaltung der erweiterten Elemente (Iconbox, Teambox, Testimonial …)
 * folgt mit deren eigenen Klassennamen — siehe docs/spurensuche-befund.md.
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. Abstand zwischen Elementen
 * -------------------------------------------------------------------------- */

.mm-haupt > .ce_text,
.mm-haupt > .ce_headline,
.mm-haupt > .ce_image,
.mm-haupt > .ce_gallery,
.mm-haupt > .ce_list,
.mm-haupt > .ce_table,
.mm-haupt > .ce_accordion,
.mm-haupt > .ce_player,
.mm-haupt > .ce_youtube,
.mm-haupt > .ce_hyperlink,
.mm-haupt > .ce_downloads,
.mm-haupt > .ce_download,
.mm-haupt > .mod_article,
.mm-haupt > .ce_form {
	margin-bottom: var(--mm-abschnitt);
}

.mm-haupt > *:last-child {
	margin-bottom: 0;
}

/* -----------------------------------------------------------------------------
 * 2. Text und Bild
 * -------------------------------------------------------------------------- */

.ce_text > *:last-child,
.ce_list > *:last-child {
	margin-bottom: 0;
}

figure.image_container {
	margin: 0 0 var(--mm-luft);
}

figure.image_container img {
	display: block;
	border-radius: var(--mm-radius);
}

figure.image_container figcaption {
	margin-top: var(--mm-luft-klein);
	font-size: var(--mm-schrift-klein);
	color: var(--mm-text-leise);
}

/* Bild im Text: schwebt neben dem Absatz, ab schmalen Bildschirmen darüber. */
.ce_text .float_left,
.ce_text .float_right {
	max-width: 46%;
}

.ce_text .float_left {
	float: left;
	margin: 0 var(--mm-luft) var(--mm-luft) 0;
}

.ce_text .float_right {
	float: right;
	margin: 0 0 var(--mm-luft) var(--mm-luft);
}

@media (max-width: 767px) {
	.ce_text .float_left,
	.ce_text .float_right {
		float: none;
		max-width: 100%;
		margin: 0 0 var(--mm-luft);
	}
}

/* -----------------------------------------------------------------------------
 * 3. Aufzählung, Tabelle, Download
 * -------------------------------------------------------------------------- */

.ce_table table {
	font-size: var(--mm-schrift-klein);
}

.ce_downloads ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Ein Eintrag ist eine Zeile aus drei Feldern: Symbol, Dateiname, Groesse.
   Weil der Name die Mitte bekommt, stehen die Groessen rechtsbuendig
   untereinander statt hinter unterschiedlich langen Namen zu flattern.
   Trennstriche braucht die Liste dann nicht mehr — Abstand und die
   Unterlegung beim Ueberfahren gliedern sie deutlicher. */
.ce_downloads li {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: baseline;
	column-gap: var(--mm-luft-klein);
	padding: 8px var(--mm-luft-klein);
	border-radius: var(--mm-radius);
	transition: background var(--mm-dauer) var(--mm-kurve);
}

.ce_downloads li::before {
	content: '';
	align-self: center;
	width: 1.1em;
	height: 1.1em;
	background-color: var(--mm-akzent);
	-webkit-mask: var(--mm-symbol-dokument) center / contain no-repeat;
	        mask: var(--mm-symbol-dokument) center / contain no-repeat;
}

.ce_downloads li:hover { background: var(--mm-akzent-blass); }

.ce_downloads li a { text-decoration: none; }
.ce_downloads li a:hover { text-decoration: underline; }

.ce_download {
	padding: 8px var(--mm-luft-klein);
	border-radius: var(--mm-radius);
	transition: background var(--mm-dauer) var(--mm-kurve);
}

.ce_download:hover { background: var(--mm-akzent-blass); }

.mm-dateigroesse {
	color: var(--mm-text-leise);
	font-size: var(--mm-schrift-klein);
	white-space: nowrap;
}

/* Im Kundenbereich steht die Dateiliste als eigener Kasten neben dem
   Wochentext. Der Kasten macht sichtbar, wo die Unterlagen aufhoeren und der
   naechste Block anfaengt; vorher schwebten die Verweise frei im Weissraum. */
body.app .ce_downloads {
	padding: var(--mm-luft) var(--mm-luft) var(--mm-luft-klein);
	background: var(--mm-flaeche-leise);
	border-radius: var(--mm-radius-gross);
}

body.app .ce_downloads + .ce_downloads { margin-top: var(--mm-luft); }

body.app .ce_downloads h4 {
	margin: 0 0 var(--mm-luft-klein);
	font-size: var(--mm-schrift-gross);
	line-height: var(--mm-zeile-eng);
	color: var(--mm-text-kraeftig);
}

/* -----------------------------------------------------------------------------
 * 4. Akkordeon
 * -------------------------------------------------------------------------- */

.ce_accordion {
	border-bottom: 1px solid var(--mm-linie);
}

.ce_accordion .toggler {
	position: relative;
	padding: var(--mm-luft) 36px var(--mm-luft) 0;
	font-weight: var(--mm-fett);
	color: var(--mm-text-kraeftig);
	cursor: pointer;
	border-top: 1px solid var(--mm-linie);
}

.ce_accordion .toggler::after {
	content: '';
	position: absolute;
	right: 8px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--mm-akzent);
	border-bottom: 2px solid var(--mm-akzent);
	transform: translateY(-70%) rotate(45deg);
	transition: transform var(--mm-dauer) var(--mm-kurve);
}

.ce_accordion .toggler.active::after {
	transform: translateY(-30%) rotate(225deg);
}

.ce_accordion .accordion {
	padding-bottom: var(--mm-luft);
}

/* -----------------------------------------------------------------------------
 * 5. Video und eingebettete Inhalte — Seitenverhältnis halten
 * -------------------------------------------------------------------------- */

.ce_youtube .responsive,
.ce_vimeo .responsive,
.ce_player .responsive {
	position: relative;
	aspect-ratio: 16 / 9;
}

.ce_youtube .responsive iframe,
.ce_vimeo .responsive iframe,
.ce_player .responsive video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: var(--mm-radius);
}

/* -----------------------------------------------------------------------------
 * 6. Nachrichten- und Übersichtslisten
 * -------------------------------------------------------------------------- */

.mod_newslist .layout_latest,
.mod_newslist .layout_short {
	padding-bottom: var(--mm-luft);
	margin-bottom: var(--mm-luft);
	border-bottom: 1px solid var(--mm-linie);
}

.mod_newslist .info,
.mod_newsreader .info {
	font-size: var(--mm-schrift-klein);
	color: var(--mm-text-leise);
}

/* -----------------------------------------------------------------------------
 * 7. Blätterfunktion
 * -------------------------------------------------------------------------- */

.mm-blaetterung__gesamt {
	margin: var(--mm-luft) 0 0;
	font-size: var(--mm-schrift-klein);
	color: var(--mm-text-leise);
}

.mm-blaetterung__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: var(--mm-luft-klein) 0 0;
	padding: 0;
	list-style: none;
}

.mm-blaetterung__verweis {
	display: block;
	padding: 8px 13px;
	border: 1px solid var(--mm-linie);
	border-radius: var(--mm-radius);
}

.mm-blaetterung__verweis.active {
	background: var(--mm-akzent);
	border-color: var(--mm-akzent);
	color: var(--mm-flaeche);
}

/* -----------------------------------------------------------------------------
 * 7b. Bildergalerie
 * -------------------------------------------------------------------------- */

.mm-galerie {
	display: grid;
	grid-template-columns: repeat(var(--mm-galerie-spalten, 3), 1fr);
	gap: var(--mm-luft);
	margin: 0 0 var(--mm-luft);
	padding: 0;
	list-style: none;
}

.mm-galerie__feld img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--mm-radius);
}

@media (max-width: 767px) {
	.mm-galerie { grid-template-columns: repeat(2, 1fr); }
}