/*
Dittmar Dacheindeckungen GmbH
creation Date: 2026-08-19
Author: Sebastian Osinski
https://ddm-friends.de

mod_ddm_jobs - only what the template utilities do not already cover.
Colours come from colors.css (blue, rose, rose_bg, blue_bg, rose_border, white),
layout from template.css (flexwrap, flexbox, contstyles, ddm_btn, ddm_animgroup).
Container and outer spacing belong to the article override, not to the module.

Note: Joomla injects this file through <jdoc:include type="head" />, which sits
above the template stylesheets in index.php. Selectors are therefore scoped with
.ddm_jobs wherever they override a template rule, so they win on specificity
instead of relying on source order.
*/

.ddm_jobs {
	position: relative;
	display: block;
	width: 100%;
}


/* UEBERSCHRIFT
   Die rose Linie ist die Unterkante der Ueberschrift selbst - ein eigenes
   Element dafuer waere ein Strich ohne Bedeutung im Dokument. */
.ddm_jobs .ddm_jobs_headline {
	margin: 0px;
	border-bottom: 2px solid;
	padding-bottom: 26px;
	font-family: 'Avenir-Light', sans-serif;
	font-size: 46px;
	line-height: 56px;
}


/* EIN JOBANGEBOT
   Links der Text, rechts die beiden Kaesten. Die Spalten haengen an
   .flexwrap / .flexbox aus den Utilities. */
.ddm_jobs .ddm_job {
	margin-top: 120px;
	align-items: flex-start;
}
/* Zwischen zwei Ausschreibungen steht mehr Luft als nach der Linie - sonst
   laufen die Angebote zu einem Block zusammen. */
.ddm_jobs .ddm_job + .ddm_job {
	margin-top: 150px;
}

/* Der Fliesstext ist im Blocksatz gesetzt, wie in der Vorlage. Ohne Trennung
   reisst das in der schmalen Spalte Loecher - deshalb beides zusammen. */
.ddm_jobs .ddm_job_text {
	text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

/* TITEL - fetter Jobtitel, darunter der Untertitel im leichten Schnitt.
   Beide auf derselben Stufe, der Wechsel liegt allein im Schnitt. */
.ddm_jobs .ddm_job_title {
	margin: 0px;
	font-size: 26px;
	line-height: 35px;
	/* Ueberschriften bleiben unaufgeteilt - eine getrennte Stellenbezeichnung
	   liest sich schlecht. */
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
	text-align: left;
}
.ddm_jobs .ddm_job_name {
	font-family: 'Avenir-Medium', sans-serif;
}
/* Der Untertitel beginnt immer auf einer eigenen Zeile, auch wenn hinter dem
   Gedankenstrich noch Platz waere. */
.ddm_jobs .ddm_job_claim {
	display: block;
	font-family: 'Avenir-Light', sans-serif;
}

/* BESCHREIBUNG - der Fliesstext aus dem Editor. Er traegt seine Abstaende
   selbst, damit zwischen Titel und Text nicht der Absatzabstand aus
   .contstyles steht. */
.ddm_jobs .ddm_job_body {
	margin-top: 30px;
}
.ddm_jobs .ddm_job_body p {
	margin: 0px;
	font-size: 17px;
	line-height: 27px;
}
.ddm_jobs .ddm_job_body p + p {
	margin-top: 20px;
}
.ddm_jobs .ddm_job_body ul,
.ddm_jobs .ddm_job_body ol {
	margin: 16px 0px 0px 0px;
	padding-left: 22px;
}
.ddm_jobs .ddm_job_body li {
	margin: 0px 0px 8px 0px;
	font-size: 17px;
	line-height: 27px;
}
.ddm_jobs .ddm_job_text .ddm_btn {
	margin-top: 44px;
	margin-bottom: 0px;
}


/* AUFGABEN & ANFORDERUNGEN
   Zwei gleich breite Kaesten nebeneinander. Steht nur einer davon, nimmt er
   die ganze Spalte - deshalb flex und nicht zwei feste Rasterspalten. */
.ddm_jobs .ddm_job_cards {
	display: flex;
	flex-flow: row nowrap;
	align-items: flex-start;
	gap: 16px;
	/* Die Kaesten setzen etwas unter dem Jobtitel an, damit die Ausschreibung
	   zuerst gelesen wird und nicht die Aufzaehlung daneben. */
	margin-top: 30px;
}
.ddm_jobs .ddm_job_card {
	box-sizing: border-box;
	/* min-width: 0 laesst lange Woerter den Kasten nicht aufziehen. */
	flex: 1 1 0;
	min-width: 0px;
	padding: 30px 28px 32px 28px;
	border-radius: 14px;
}
.ddm_jobs .ddm_job_card_title {
	margin: 0px;
	font-family: 'Avenir-Book', sans-serif;
	font-size: 20px;
	line-height: 28px;
}
.ddm_jobs .ddm_job_card_body {
	margin-top: 22px;
}
/* Aufzaehlungen mit rundem Punkt - anders als die Pluszeichen im uebrigen
   Seitenaufbau, die dort fuer Vorteile stehen. Hier sind es schlicht Listen. */
.ddm_jobs .ddm_job_card_body ul,
.ddm_jobs .ddm_job_card_body ol {
	margin: 0px;
	padding-left: 18px;
}
.ddm_jobs .ddm_job_card_body li {
	margin: 0px 0px 9px 0px;
	font-size: 15px;
	line-height: 22px;
}
.ddm_jobs .ddm_job_card_body li:last-child {
	margin-bottom: 0px;
}
.ddm_jobs .ddm_job_card_body p {
	margin: 0px 0px 9px 0px;
	font-size: 15px;
	line-height: 22px;
}
.ddm_jobs .ddm_job_card_body p:last-child {
	margin-bottom: 0px;
}


@media (max-width: 1320px) {
	.ddm_jobs .ddm_jobs_headline {
		padding-bottom: 22px;
		font-size: 38px;
		line-height: 46px;
	}
	.ddm_jobs .ddm_job {
		margin-top: 90px;
	}
	.ddm_jobs .ddm_job + .ddm_job {
		margin-top: 110px;
	}
	.ddm_jobs .ddm_job_title {
		font-size: 22px;
		line-height: 30px;
	}
	.ddm_jobs .ddm_job_body {
		margin-top: 26px;
	}
	.ddm_jobs .ddm_job_body p,
	.ddm_jobs .ddm_job_body li {
		font-size: 16px;
		line-height: 25px;
	}
	.ddm_jobs .ddm_job_text .ddm_btn {
		margin-top: 36px;
	}
	.ddm_jobs .ddm_job_cards {
		gap: 12px;
	}
	.ddm_jobs .ddm_job_card {
		padding: 24px 22px 26px 22px;
	}
	.ddm_jobs .ddm_job_card_title {
		font-size: 18px;
		line-height: 26px;
	}
	.ddm_jobs .ddm_job_card_body {
		margin-top: 18px;
	}
}

/* Ab hier stehen die Spalten untereinander - resFull_800 aus responsive.css
   greift auf derselben Stufe. */
@media (max-width: 860px) {
	.ddm_jobs .ddm_jobs_headline {
		padding-bottom: 18px;
		font-size: 30px;
		line-height: 38px;
	}
	.ddm_jobs .ddm_job {
		margin-top: 70px;
	}
	.ddm_jobs .ddm_job + .ddm_job {
		margin-top: 90px;
	}
	/* Der Blocksatz braucht Zeilenlaenge. Ueber die ganze Breite eines Telefons
	   steht der Text ruhiger im Flattersatz. */
	.ddm_jobs .ddm_job_text {
		text-align: left;
	}
	.ddm_jobs .ddm_job_cards {
		margin-top: 34px;
	}
}

/* Nebeneinander werden die beiden Kaesten zu schmal fuer ihre Aufzaehlungen. */
@media (max-width: 600px) {
	.ddm_jobs .ddm_job_cards {
		flex-flow: column nowrap;
		gap: 14px;
	}
}