/*
Dittmar Dacheindeckungen GmbH
creation Date: 2026-08-10
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

body, html{
	font-family: 'Avenir-Book', sans-serif;
	width: 100%;
	height: auto;
	margin: 0px;
	font-size: 18px;
	overflow-x: hidden;
	/* clip schneidet genauso ab, macht body aber nicht zum Scrollbereich -
	   mit hidden an body und html zugleich bliebe position: sticky (die
	   Zeitleiste) wirkungslos. hidden steht davor als Netz fuer alte Browser. */
	overflow-x: clip;
	font-weight: normal;
}
textarea, input{
	font-family: 'Avenir-Book', sans-serif;
}
*{
	margin: 0px;
	padding: 0px;
}
.bold, b, strong, .IstokWeb-Bold{
	font-family: 'Avenir-Medium', sans-serif;
}
h1, h2, h3, h4, h5{
	font-family: 'Avenir-Medium', sans-serif;
}
/* Ueberschriften brechen ausgeglichen um statt mit einem einzelnen Wort in der
   letzten Zeile. overflow-wrap ist nur das Netz: ein Wort, das trotzdem nicht in
   seine Spalte passt, wird umbrochen statt vom overflow-x: hidden der Seite
   abgeschnitten. */
h1, h2, h3, h4, h5, h6{
	overflow-wrap: break-word;
	text-wrap: balance;
}
.light{
	font-weight: lighter;
}
img{
	border: none;
}
a{
	color: inherit;
	text-decoration: none;
}
.contstyles a:hover{
	text-decoration: underline;
}
a.anchorlink{
	line-height: 0px;
	height: 0px;
	font-size: 0px;
}
table{
	width: 100%;
	table-layout: fixed;
}
td{
	vertical-align: top;
	position: relative;
}
h1,
h2.title{
	font-size: 56px;
	line-height: 64px;
	letter-spacing: 1px;
}
h2{
	font-size: 46px;
	line-height: 54px;
}
h2.marged_bot{
	margin-bottom: 30px;
}
h3{
	font-size: 38px;
	line-height: 46px;
}
h4{
	font-size: 32px;
	line-height: 40px;
}
.alt_headlines h4{
	text-transform: uppercase;
	font-weight: bold;
}
h5{
	font-size: 24px;
	line-height: 32px;
}
h6{
	font-size: 22px;
}
p,
.contstyles li{
	margin-top: 15px;
	margin-bottom: 15px;
	line-height: 28px;
	position: relative;
}
.contstyles p{
	margin-top: 15px;
	margin-bottom: 15px;
}
.contstyles ul,
.contstyles ol{
	margin-left: 25px;
}
p.nomarg_top{
	margin-top: 0px;
}
p.nomarg_bot{
	margin-bottom: 0px;
}
p.nomarg{
	margin-top: 0px;
	margin-bottom: 0px;
}
.hidden{
	visibility: hidden;
}
.visible{
	visibility: visible;
}
.center{
	text-align: center;
}
.left{
	text-align: left;
}
.right{
	text-align: right;
}
.uppercase,
.uppercase_headlines h1,
.uppercase_headlines h2,
.uppercase_headlines h3,
.uppercase_headlines h4,
.uppercase_headlines h5,
.uppercase_headlines h6{
	text-transform: uppercase;
}
.lowercase{
	text-transform: lowercase;
}
.nocase{
	text-transform: none;
}
.underline{
	text-decoration: underline;
}
.underline_links a,
.underline_onHover a:hover{
	text-decoration: underline;
}
.nounderline,
.nounderline *:hover{
	text-decoration: none !important;
}
.inline{
	display: inline;
}
.relative{
	position: relative;
}
.font_l,
.font_l p,
.font_l .contstyles li{
	font-size: 22px;
	line-height: 32px;
}
.fields-container{
	display: none;
}
span.font_s,
p.font_s,
.font_s li{
	font-size: 16px;
}
p.font_s,
.font_s li{
	line-height: 24px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.nooverflow{
	overflow: hidden;
}
.overflow{
	overflow: visible;
}
.functionpad{
	padding-top: 1px;
	padding-bottom: 1px;
}



/* GLOBALS */
.main-container{
	margin-left: auto;
	margin-right: auto;
	width: 1620px;
	max-width: 95%;
	position: relative;
}
.main-container.wide{
	width: 1820px;
	max-width: 98%;
}
.main-container.narrow{
	width: 1000px;
	max-width: 93%;
}
.main-container.narrow2{
	width: 800px;
	max-width: 90%;
}
.main-container.fullheight{
	display: block;
	height: 100%;
}
.extrawidepad,
.main-container.extrawidepad{
	padding-top: 180px;
	padding-bottom: 180px;
}
.extrawidepad_top,
.main-container.extrawidepad_top{
	padding-top: 180px;
}
.extrawidepad_bot,
.main-container.extrawidepad_bot{
	padding-bottom: 180px;
}
.widepad,
.cont-block .main-container.widepad{
	padding-top: 100px;
	padding-bottom: 100px;
}
.widepad_top,
.cont-block .main-container.widepad_top{
	padding-top: 100px;
}
.widepad_bot,
.cont-block .main-container.widepad_bot{
	padding-bottom: 100px;
}
.regpad,
.cont-block .main-container.regpad{
	padding-top: 70px;
	padding-bottom: 70px;
}
.regpad_top,
.cont-block .main-container.regpad_top{
	padding-top: 70px;
}
.regpad_bot,
.cont-block .main-container.regpad_bot{
	padding-bottom: 70px;
}
.lowpad{
	padding-top: 50px;
	padding-bottom: 50px;
}
.lowpad_bot{
	padding-bottom: 50px;
}
.lowpad_top{
	padding-top: 50px;
}
.cont-block{
	position: relative;
	display: block;
	width: 100%;
}

.page-header{
	display: none;
}

img.cont_img{
	max-width: 100% !important;
	height: auto !important;
}
img.cont_img_limit{
	max-width: 100% !important;
	width: 870px !important;
	height: auto !important;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
img.absimg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
img.fullsize{
	width: 100%;
	display: block;
}
img.maxSize{
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}
img.sizeFittings{
	display: block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
}

/* INDEXES */
.ddm_modal{
	z-index: 100;
}
#menu_activator{
	z-index: 13;
}
#header{
	z-index: 12;
}
#topmenu-wrapper{
	z-index: 11;
}
#logo_wrapper{
	z-index: 10;
}
.zindex6,
.cont-block.zindex6{
	z-index: 6;
}
.zindex5,
.cont-block.zindex5{
	z-index: 5;
}
.zindex4,
.cont-block.zindex4{
	z-index: 4;
}
.zindex3,
.cont-block.zindex3{
	z-index: 3;
}
#content-wrapper,
.zindex2,
.cont-block.zindex2{
	z-index: 2;
}
.cont-block,
.zindex1,
.cont-block.zindex1{
	z-index: 1;
}
.zeroindex{
	z-index: 0;
}



/* transitions */
img.fullsize{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
a{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;	
}
.animated_children, .animated_children *{
	-webkit-transition: all 200ms linear;
	-moz-transition: all 200ms linear;
	-ms-transition: all 200ms linear;
	-o-transition: all 200ms linear;
	transition: all 200ms linear;	
}
.nonanimated_children, .nonanimated_children *{
	-webkit-transition: all 0ms linear;
	-moz-transition: all 0ms linear;
	-ms-transition: all 0ms linear;
	-o-transition: all 0ms linear;
	transition: all 0ms linear;	
}


/* CONTENT */
#content-wrapper{
	overflow: visible;
}


/* CONTENT SPECIFIC */
.block{
	display: block;
	position: relative;
}
.contentspacer{
	display: block;
	position: relative;
	width: 100%;
	height: 90px;
}
.overlay_mask{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
}
.linespacer{
	display: block;
	position: relative;
	width: 100%;
	height: 1px;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
.linespacer.nomarg{
	margin: 0px;
}
.linespacer.narrow{
	width: 700px;
	max-width: 100%;
}

.section_bg{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	width: 100%;
	height: auto;
}

#top_spacer{
	display: block;
	position: relative;
	height: 0px;
}

.flexwrap{
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
}
.flexwrap.leftalign{
	justify-content: left;
	gap: 2%;
}

.flexbox{
	position: relative;
}
.flexbox._s10{
	width: 10%;
}
.flexbox._s15{
	width: 15%;
}
.flexbox._s20{
	width: 20%;
}
.flexbox._s25{
	width: 25%;
}
.flexbox._s30{
	width: 30%;
}
.flexbox._s35{
	width: 35%;
}
.flexbox._s40{
	width: 40%;
}
.flexbox._s45{
	width: 45%;
}
.flexbox._s47{
	width: 47%;
}
.flexbox._s49{
	width: 49%;
}
.flexbox._half{
	width: 48%;
}
.flexbox._s50{
	width: 50%;
}
.flexbox._s55{
	width: 55%;
}
.flexbox._s60{
	width: 60%;
}
.flexbox._s65{
	width: 65%;
}
.flexbox._s70{
	width: 70%;
}
.flexbox._s75{
	width: 70%;
}
.flexbox._s80{
	width: 80%;
}
.flexbox._s90{
	width: 90%;
}
.flexbox._full{
	width: 100%;
}
.flexbox_half{
	width: 48%;
}
.flexbox_third{
	width: 31%;
}


.contentbutton{
	position: relative;
	display: inline-block;
	margin-left: 0px;
	z-index: 1;
	border: none;
	border-radius: 0px;
	padding: 0px;
	padding-left: 30px;
	padding-right: 30px;
	font-size: 16px;
	width: 100px;
	height: 45px;
	margin-top: 10px;
	margin-bottom: 10px;
	text-align: center;
	overflow: hidden;
}
.contentbutton.abs{
	position: absolute;
}
.contentbutton a{
	position: absolute !important;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1;
	font-weight: bold;
}
.contentbutton a::after{
	display: none !important;
}
.contentbutton > a > span{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}
.contentbutton:hover a{
	text-decoration: none;
}
.contentbutton:hover{
  -webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0, 0.4);
	-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0, 0.4);
	box-shadow: 0px 0px 2px 0px rgba(0,0,0, 0.4);
}
.contentbutton.hoverblur::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}
.contentbutton.hoverblur:hover::before {
  opacity: 1;
}
.contentbutton.bordered{
	border: 1px solid;
}
.contentbutton span.contentbutton_arrow{
	display: inline-block;
	font-weight: bold;
	padding-left: 2px;
	font-family: 'Raleway-ExtraBold', sans-serif;
}
.contentbutton:hover span.contentbutton_arrow{
	padding-left: 6px;
}
.contentbutton .contentbutton_arrow_icon{
	display: inline-block;
	vertical-align: middle;
	height: 12px;
	padding-left: 3px;
}
.contentbutton:hover .contentbutton_arrow_icon{
	padding-left: 6px;
}



/* SPECIFICS */
.linehover_links a,
.linehover_links a:hover{
    position: relative;
    text-decoration: none;
}
.linehover_links a::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 1px;
    width: 0;
    background-color: #1a1a1a;
    transition: width 300ms ease;
}
.linehover_links a:hover::after {
    width: 100%;
}
.white .linehover_links a::after,
.white.linehover_links a::after,
.footer_wrapper.linehover_links a::after{
	 background-color: white;
}
.g .linehover_links a::after,
.g.linehover_links a::after{
	 background-color: #C3C2C2;
}
.blue .linehover_links a::after,
.blue.linehover_links a::after{
	 background-color: #002643;
}



.linkoverlay{
	position: absolute !important;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 4;
}


/* claro accessibility overrides */
.cm-link.cn-learn-more{
	color: black !important;
}
.cm-btn.cm-btn-danger.cn-decline{
	background-color: #767676 !important;
}
.cm-btn.cm-btn-success{
	background-color: #0a835f !important;
}
.cm-btn.cm-btn-success-var{
	background-color: #00875f !important;
}




/* DDM MODAL */
.ddm_modal{
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 0px;
	opacity: 0;
	overflow: hidden;
	backdrop-filter: blur(8px); 
	-webkit-backdrop-filter: blur(8px);
	background: rgba(0, 0, 0, 0.35);
}
.ddm_modal.active{
	height: 100%;
	opacity: 1;
}
.ddm_modal_contwrap{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 800px;
	max-width: 95%;
	height: 800px;
	max-height: 90%;
	overflow: hidden;
}
.ddm_modal_close{
	position: absolute;
	top: 15px;
	right: 25px;
	z-index: 4;
	width: 40px;
	height: 40px;
	border-radius: 50px;
	cursor: pointer;
}
.ddm_modal_close:hover{
	filter: drop-shadow(0 0 6px rgba(0,0,0,0.45)) brightness(1.1);
}
.ddm_modal_close span{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	pointer-events: none;
	font-weight: bold;
	margin-top: 1px;
}
.ddm_modal_cont{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 40px;
	overflow-x: hidden;
	overflow-y: scroll;
}




/* CONTENT HOME
   Hardcoded Startseiten-Sektionen aus html/com_content/article/default.php.
   Farben kommen aus colors.css, Layout/Abstaende aus den Utilities oben.
   Breakpoints stehen in responsive.css. */

/* KOPFBILD / INTRO
   Fuellt auf dem Desktop das Fenster. Die Hoehe steht auf min-height, damit
   langer Text den Abschnitt waechst statt abgeschnitten zu werden; svh haelt
   die Hoehe stabil, waehrend auf dem Telefon die Adressleiste ein- und
   ausfaehrt. */
.intro_block{
	height: auto;
	min-height: 100vh;
	min-height: 100svh;
}
/* Der 30px-Abstandshalter aus index.php wuerde das Kopfbild von der
   Fensterkante loesen - die feste Kopfleiste soll aber darauf liegen. */
body:has(.intro_block) #top_spacer{
	height: 0px;
}

/* Das Bild steht 15% ueber und unter dem Abschnitt hinaus. autoBgParalax()
   schiebt es um scrollTop/3 nach unten - der Ueberstand reicht, damit die
   Flaeche waehrend der gesamten Sichtbarkeit des Abschnitts gedeckt bleibt.
   Das Motiv ist fast quadratisch und das Haus steht im unteren Drittel - am
   Fuss verankert bleibt das Dach auch im Querformat ganz im Bild. */
.intro_bg{
	position: absolute;
	left: 0px;
	top: -15%;
	z-index: 0;
	width: 100%;
	height: 130%;
	object-fit: cover;
	object-position: center bottom;
}
/* Verlauf in der Hausfarbe haelt die weisse Schrift lesbar, unabhaengig davon
   wie hell das Motiv oben und unten ausfaellt. */
.intro_scrim{
	z-index: 1;
	background: -webkit-linear-gradient(top, rgba(0, 38, 67, 0.45) 0%, rgba(0, 38, 67, 0.12) 34%, rgba(0, 38, 67, 0.10) 54%, rgba(0, 38, 67, 0.55) 100%);
	background: linear-gradient(180deg, rgba(0, 38, 67, 0.45) 0%, rgba(0, 38, 67, 0.12) 34%, rgba(0, 38, 67, 0.10) 54%, rgba(0, 38, 67, 0.55) 100%);
}

/* Titel oben, Text und Button am Fuss - beide linksbuendig auf der Achse des
   Logos, weil .main-container.wide auch die Kopfleiste ausrichtet. */
.intro_inner{
	z-index: 2;
	display: flex;
	flex-flow: column nowrap;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: 100vh;
	min-height: 100svh;
	padding-top: 25vh;
	padding-bottom: 12vh;
}
.intro_title{
	font-family: 'Avenir-Light', sans-serif;
	font-size: 86px;
	line-height: 94px;
	letter-spacing: 1px;
	text-shadow: 0px 2px 24px rgba(0, 0, 0, 0.35);
}
.intro_subtitle{
	display: block;
	font-size: 58px;
	line-height: 66px;
}
.intro_text{
	max-width: 480px;
	font-size: 24px;
	line-height: 36px;
	text-shadow: 0px 2px 18px rgba(0, 0, 0, 0.40);
}
.intro_foot .ddm_btn{
	margin-top: 44px;
	margin-bottom: 0px;
}


/* SEKTIONSUEBERSCHRIFTEN - zweizeilig, Akzent- ueber Hausfarbe. Steht auf der
   Startseite wie auf den Leistungsseiten, daher der neutrale Praefix. */
.ddm_headline{
	line-height: 60px;
	margin-bottom: 90px;
}
.ddm_headline span{
	display: block;
}
/* Folgt direkt eine Einleitung, gehoert der Abstand darunter ihr - sonst
   reisst der Sektionsabstand die beiden Zeilen auseinander. */
.ddm_headline._tight{
	margin-bottom: 0px;
}
.ddm_headline._tight + p.ddm_lead{
	margin-top: 18px;
}
/* Abstand zur naechsten Sektion */
.home_tilegrid + .ddm_headline{
	margin-top: 130px;
}


/* KACHELRASTER */
.home_tilegrid{
	display: grid;
	gap: 10px;
	align-items: start;
}
.home_tilegrid._cols3{
	grid-template-columns: repeat(3, 1fr);
}
.home_tilegrid._cols4{
	grid-template-columns: repeat(4, 1fr);
	/* Die langen Beschriftungen brechen in schmalen Spalten auf zwei Zeilen um.
	   Die Kacheln ziehen sich deshalb auf die Zeilenhoehe, damit alle Titelbalken
	   gleich hoch bleiben statt unten auszufransen. Im dreispaltigen Raster geht
	   das nicht, dort wuerde die hoehere Kontaktbox die Kacheln mitziehen. */
	align-items: stretch;
}
.home_tilegrid._cols4 .home_tile{
	display: flex;
	flex-flow: column nowrap;
}
.home_tilegrid._cols4 .home_tile_media{
	flex: 0 0 auto;
}
.home_tilegrid._cols4 .home_tile_bar{
	display: flex;
	flex: 1 1 auto;
	align-items: center;
}


/* KACHEL - komplett klickbar */
.home_tile{
	position: relative;
	display: block;
	overflow: hidden;
	-webkit-transition: transform 450ms cubic-bezier(.2, .7, .2, 1), box-shadow 450ms cubic-bezier(.2, .7, .2, 1);
	transition: transform 450ms cubic-bezier(.2, .7, .2, 1), box-shadow 450ms cubic-bezier(.2, .7, .2, 1);
}
.home_tile_media{
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.home_tile_media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	-webkit-transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
	transition: transform 900ms cubic-bezier(.16, 1, .3, 1);
}
.home_tile_bar{
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
	padding: 16px 48px 17px 18px;
	font-size: 19px;
	line-height: 27px;
}
.home_tilegrid._cols4 .home_tile_bar{
	padding: 14px 40px 15px 16px;
	font-size: 18px;
	line-height: 26px;
}
.home_tile_label{
	position: relative;
	z-index: 1;
	display: block;
	-webkit-transition: transform 450ms cubic-bezier(.2, .7, .2, 1);
	transition: transform 450ms cubic-bezier(.2, .7, .2, 1);
}
.home_tile_arrow{
	position: absolute;
	top: 50%;
	right: 18px;
	z-index: 1;
	margin-top: -14px;
	font-family: 'Avenir-Medium', sans-serif;
	font-size: 24px;
	line-height: 28px;
	opacity: 0;
	transform: translateX(-8px);
	-webkit-transition: opacity 450ms cubic-bezier(.2, .7, .2, 1), transform 450ms cubic-bezier(.2, .7, .2, 1);
	transition: opacity 450ms cubic-bezier(.2, .7, .2, 1), transform 450ms cubic-bezier(.2, .7, .2, 1);
}
/* Akzentlinie in der jeweils anderen Hausfarbe, waechst von links */
.home_tile_line{
	position: absolute;
	left: 0px;
	bottom: 0px;
	z-index: 2;
	width: 100%;
	height: 2px;
	transform: scaleX(0);
	transform-origin: left center;
	-webkit-transition: transform 450ms cubic-bezier(.2, .7, .2, 1);
	transition: transform 450ms cubic-bezier(.2, .7, .2, 1);
}
.home_tile:hover,
.home_tile:focus-visible{
	transform: translateY(-6px);
	-webkit-box-shadow: 0px 14px 30px rgba(0, 38, 67, 0.20);
	-moz-box-shadow: 0px 14px 30px rgba(0, 38, 67, 0.20);
	box-shadow: 0px 14px 30px rgba(0, 38, 67, 0.20);
}
.home_tile:hover .home_tile_media img,
.home_tile:focus-visible .home_tile_media img{
	transform: scale(1.06);
}
.home_tile:hover .home_tile_label,
.home_tile:focus-visible .home_tile_label{
	transform: translateX(6px);
}
.home_tile:hover .home_tile_arrow,
.home_tile:focus-visible .home_tile_arrow{
	opacity: 1;
	transform: translateX(0px);
}
.home_tile:hover .home_tile_line,
.home_tile:focus-visible .home_tile_line{
	transform: scaleX(1);
}
.home_tile:focus-visible{
	outline: 2px solid #002643;
	outline-offset: 3px;
}


/* KONTAKTBOX - schmaler als die Rasterspalte und bewusst nach unten versetzt */
.home_contactbox{
	position: relative;
	display: flex;
	flex-flow: column nowrap;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
	width: 62%;
	min-height: 360px;
	margin-top: 60px;
	margin-left: auto;
	margin-right: auto;
	padding: 46px 42px 42px 42px;
	border-radius: 18px;
}
.home_contactbox_text{
	max-width: 400px;
	font-size: 26px;
	line-height: 38px;
}


/* BUTTONS - Fuellung faehrt von links ein, Schrift bleibt weiss */
.ddm_btn{
	position: relative;
	display: inline-block;
	overflow: hidden;
	margin-top: 34px;
	padding: 12px 34px 13px 34px;
	border-radius: 40px;
	font-family: 'Avenir-Medium', sans-serif;
	font-size: 18px;
	line-height: 26px;
	-webkit-transition: transform 350ms cubic-bezier(.2, .7, .2, 1), box-shadow 350ms cubic-bezier(.2, .7, .2, 1);
	transition: transform 350ms cubic-bezier(.2, .7, .2, 1), box-shadow 350ms cubic-bezier(.2, .7, .2, 1);
}
.ddm_btn_fill{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	-webkit-transition: transform 350ms cubic-bezier(.2, .7, .2, 1);
	transition: transform 350ms cubic-bezier(.2, .7, .2, 1);
}
.ddm_btn_label{
	position: relative;
	z-index: 1;
}
.ddm_btn:hover,
.ddm_btn:focus-visible{
	transform: translateX(4px);
	-webkit-box-shadow: 0px 8px 20px rgba(0, 38, 67, 0.22);
	-moz-box-shadow: 0px 8px 20px rgba(0, 38, 67, 0.22);
	box-shadow: 0px 8px 20px rgba(0, 38, 67, 0.22);
}
.ddm_btn:hover .ddm_btn_fill,
.ddm_btn:focus-visible .ddm_btn_fill{
	transform: scaleX(1);
}
.ddm_btn:focus-visible{
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}
/* Geisterfassung fuer helle Flaechen: nur Rand und Schrift in der Akzentfarbe.
   Die Fuellung faehrt wie beim vollen Button ein und dreht die Schrift weiss. */
.ddm_btn._ghost{
	padding: 10px 32px 11px 32px;
	border: 2px solid;
	background-color: transparent;
}
.ddm_btn._ghost .ddm_btn_label{
	-webkit-transition: color 350ms cubic-bezier(.2, .7, .2, 1);
	transition: color 350ms cubic-bezier(.2, .7, .2, 1);
}
.ddm_btn._ghost:hover .ddm_btn_label,
.ddm_btn._ghost:focus-visible .ddm_btn_label{
	color: #ffffff;
}
.ddm_btn._ghost:focus-visible{
	outline-color: #002643;
}
/* Der Kontakt-Button steht selbst auf roséfarbenem Grund und faehrt deshalb
   weiss auf - eine rosé Fuellung wuerde ihn in der Karte verschwinden lassen. */
.home_contactbox .ddm_btn_label{
	-webkit-transition: color 350ms cubic-bezier(.2, .7, .2, 1);
	transition: color 350ms cubic-bezier(.2, .7, .2, 1);
}
.home_contactbox .ddm_btn:hover .ddm_btn_label,
.home_contactbox .ddm_btn:focus-visible .ddm_btn_label{
	color: #002643;
}
.home_tile:hover,
.home_tile:focus,
.ddm_btn:hover,
.ddm_btn:focus{
	text-decoration: none;
}


/* UMGESETZTE PROJEKTE
   Gerendert von ddm_renderProjectsSection() im Artikel-Override und deshalb
   nicht mehr nur auf der Startseite zuhause - daher der neutrale Praefix. Der
   Kasten bringt nur seinen eigenen Abstand nach oben mit, Container und
   Aussenabstaende gehoeren der jeweiligen Seite. */
.ddm_projects{
	position: relative;
	display: block;
	width: 100%;
	margin-top: 60px;
	border-radius: 22px;
}
.ddm_projects_bg{
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ddm_projects_inner{
	position: relative;
	z-index: 2;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: 760px;
	padding: 60px;
}
.ddm_projects_title{
	font-size: 80px;
	line-height: 88px;
	text-shadow: 0px 2px 18px rgba(0, 0, 0, 0.35);
}
.ddm_projects_cta{
	width: 100%;
	margin-top: auto;
}


/* PROJEKTZAEHLER - Ziffernkacheln werden von ddm_renderCounterDigits() erzeugt */
.ddm_counter{
	text-align: right;
}
.ddm_counter_label{
	display: block;
	margin-bottom: 14px;
	font-size: 20px;
	line-height: 28px;
	text-shadow: 0px 2px 12px rgba(0, 0, 0, 0.35);
}
.ddm_counter_digits{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	min-height: 82px;
}
.counter_digit{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 82px;
	border-radius: 10px;
	font-family: 'Avenir-Medium', sans-serif;
	font-size: 46px;
	line-height: 54px;
	font-variant-numeric: tabular-nums;
	-webkit-box-shadow: 0px 8px 22px rgba(0, 38, 67, 0.22);
	-moz-box-shadow: 0px 8px 22px rgba(0, 38, 67, 0.22);
	box-shadow: 0px 8px 22px rgba(0, 38, 67, 0.22);
}
.counter_sep{
	align-self: flex-end;
	padding-bottom: 8px;
	font-family: 'Avenir-Medium', sans-serif;
	font-size: 40px;
	line-height: 40px;
}


/* SCROLL-IN, gestaffelt - Hook ist .animAct / ._animAct aus viewports.js */
.ddm_animgroup > *,
.ddm_projects.animAct .ddm_projects_inner > *{
	opacity: 0;
	transform: translateY(34px);
	-webkit-transition: opacity 750ms cubic-bezier(.16, 1, .3, 1), transform 750ms cubic-bezier(.16, 1, .3, 1);
	transition: opacity 750ms cubic-bezier(.16, 1, .3, 1), transform 750ms cubic-bezier(.16, 1, .3, 1);
}
.ddm_animgroup._animAct > *,
.ddm_projects._animAct .ddm_projects_inner > *{
	opacity: 1;
	transform: translateY(0px);
}
.ddm_animgroup._animAct > *:nth-child(1),
.ddm_projects._animAct .ddm_projects_inner > *:nth-child(1){
	transition-delay: 0ms;
}
.ddm_animgroup._animAct > *:nth-child(2),
.ddm_projects._animAct .ddm_projects_inner > *:nth-child(2){
	transition-delay: 80ms;
}
.ddm_animgroup._animAct > *:nth-child(3),
.ddm_projects._animAct .ddm_projects_inner > *:nth-child(3){
	transition-delay: 160ms;
}
.ddm_animgroup._animAct > *:nth-child(4){
	transition-delay: 240ms;
}
.ddm_animgroup._animAct > *:nth-child(5){
	transition-delay: 320ms;
}
.ddm_animgroup._animAct > *:nth-child(6){
	transition-delay: 400ms;
}
/* Das Materialraster hat acht Karten - ohne diese beiden Stufen liefen die
   letzten zwei ohne Versatz mit. */
.ddm_animgroup._animAct > *:nth-child(7){
	transition-delay: 480ms;
}
.ddm_animgroup._animAct > *:nth-child(8){
	transition-delay: 560ms;
}

@media (prefers-reduced-motion: reduce){
	.ddm_animgroup > *,
	.ddm_projects.animAct .ddm_projects_inner > *{
		opacity: 1;
		transform: none;
		transition: none;
	}
	.home_tile,
	.home_tile_media img,
	.home_tile_label,
	.home_tile_arrow,
	.home_tile_line,
	.ddm_btn,
	.ddm_btn_fill,
	.home_contactbox .ddm_btn_label{
		transition: none;
	}
	.home_tile:hover,
	.ddm_btn:hover{
		transform: none;
	}
	.home_tile:hover .home_tile_media img{
		transform: none;
	}
}

/* SEITEN-INTRO
   Wiederverwendbarer Kopfbereich fuer alle Unterseiten, gerendert von
   ddm_renderPageIntro() im Artikel-Override. Links Text und Buttons, rechts
   ein Bild, das von der Containermitte bis an den Bildschirmrand laeuft. */
.page_intro{
	position: relative;
	display: block;
	width: 100%;
	padding-top: 260px;
	padding-bottom: 150px;
}
.page_intro_inner{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
}
.page_intro_text{
	position: relative;
	z-index: 2;
	flex: 0 1 auto;
	box-sizing: border-box;
	width: 46%;
	padding-right: 40px;
}

/* Das Bild reicht von der Containermitte bis an den Fensterrand. Weil der
   Container zentriert steht, ist das genau 50vw. Der negative Aussenabstand
   ((100% - 100vw)/2 bezieht sich auf die Containerbreite) schiebt den Kasten
   um die halbe Randzone nach rechts; die aeussere Breite bleibt damit exakt
   50%. Das Bild steht also weiter im Fluss und bestimmt die Sektionshoehe. */
.page_intro_media{
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 50vw;
	margin-right: calc((100% - 100vw) / 2);
	aspect-ratio: 7 / 5;
}
.page_intro_img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	border-radius: 32px 0px 0px 32px;
}
/* Das Dach aus dem Favicon, ueber der unteren linken Bildecke */
.page_intro_roof{
	position: absolute;
	left: -168px;
	bottom: -52px;
	z-index: 2;
	display: block;
	width: 330px;
	height: auto;
	pointer-events: none;
}

/* Die Textspalte waechst mit dem Fenster, also tut es die Schrift auch: 36px an
   der 861er-Kante, 68px ab ~1920px. Mit festen Stufen stand "Wohnraumdachfenster"
   in fast jedem Bereich ueber die Spalte hinaus. Was dann noch zu lang ist, wird
   getrennt - lange Titel tragen dafuer ein ­ an der Wortfuge, das hat Vorrang
   vor dem Woerterbuch; die Mindestlaengen halten kurze Woerter heil. */
.page_intro_title{
	font-family: 'Avenir-Light', sans-serif;
	font-size: clamp(36px, 3.02vw + 10px, 68px);
	line-height: 1.15;
	letter-spacing: 0px;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
}
/* in em, damit sie das Verhaeltnis zum Titel auf jeder Breite haelt */
.page_intro_subtitle{
	display: block;
	font-size: 0.6em;
	line-height: 1.25;
}
/* Die Abstaende gehoeren dem Abschnitt, deshalb traegt das Markup hier bewusst
   kein .nomarg - das wuerde die Regel ueberstimmen. */
p.page_intro_body{
	margin-top: 60px;
	margin-bottom: 0px;
	/* Eine Stufe kraeftiger als der Fliesstext, damit Oeffnungszeiten und
	   Kurzinfos im Kopfbereich Gewicht bekommen. */
	font-family: 'Avenir-Medium', sans-serif;
	font-size: 22px;
	line-height: 34px;
}
.page_intro_actions{
	margin-top: 44px;
}
.page_intro_actions .ddm_btn{
	margin-top: 0px;
	margin-right: 14px;
}

/* AUFTRITT
   Haengt am .animAct-Hook aus viewports.js, der schon beim Laden greift, weil
   der Abschnitt im Sichtfeld steht. Text staffelt nach oben, das Bild faehrt
   von rechts ein, das Dach klappt zuletzt auf. */
.page_intro .page_intro_text > *,
.page_intro .page_intro_media{
	opacity: 0;
	-webkit-transition: opacity 900ms cubic-bezier(.16, 1, .3, 1), transform 900ms cubic-bezier(.16, 1, .3, 1);
	transition: opacity 900ms cubic-bezier(.16, 1, .3, 1), transform 900ms cubic-bezier(.16, 1, .3, 1);
}
.page_intro .page_intro_text > *{
	transform: translateY(28px);
}
.page_intro .page_intro_media{
	transform: translateX(70px) scale(0.97);
}
.page_intro .page_intro_roof{
	opacity: 0;
	transform: translateY(34px) scale(0.88);
	transform-origin: 50% 100%;
	-webkit-transition: opacity 700ms cubic-bezier(.16, 1, .3, 1), transform 700ms cubic-bezier(.16, 1, .3, 1);
	transition: opacity 700ms cubic-bezier(.16, 1, .3, 1), transform 700ms cubic-bezier(.16, 1, .3, 1);
}
.page_intro._animAct .page_intro_text > *,
.page_intro._animAct .page_intro_media,
.page_intro._animAct .page_intro_roof{
	opacity: 1;
	transform: none;
}
.page_intro._animAct .page_intro_media{
	transition-delay: 100ms;
}
.page_intro._animAct .page_intro_text > *:nth-child(1){
	transition-delay: 260ms;
}
.page_intro._animAct .page_intro_text > *:nth-child(2){
	transition-delay: 380ms;
}
.page_intro._animAct .page_intro_text > *:nth-child(3){
	transition-delay: 500ms;
}
.page_intro._animAct .page_intro_roof{
	transition-delay: 640ms;
}


/* CONTENT KONTAKT
   Rose Karte mit den Kontaktdaten neben dem Formularmodul. Die Zeile ist
   schmaler als der Container, damit die Karte nicht unter das Intro-Bild
   ausbricht. */
.kontakt_grid{
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	justify-content: space-between;
	width: 1130px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
/* Flex-Elemente duerfen per Voreinstellung nicht unter ihre Inhaltsbreite
   schrumpfen. min-width: 0 hebt das auf, damit ein langer Optionstext oder
   eine lange Eingabe die Spalte nicht ueber den Container hinaus zieht. */
.kontakt_card,
.kontakt_form{
	min-width: 0px;
}
.kontakt_card{
	box-sizing: border-box;
	width: 39%;
	padding: 48px 40px 52px 40px;
	border-radius: 18px;
}
p.kontakt_card_lead{
	margin: 0px;
	font-size: 26px;
	line-height: 38px;
}
p.kontakt_card_contact{
	margin: 40px 0px 0px 0px;
	font-size: 23px;
	line-height: 34px;
}
p.kontakt_card_address{
	margin: 40px 0px 0px 0px;
}
.kontakt_form{
	width: 53%;
}


/* LEISTUNGSSEITEN
   Aufbau unter dem Seiten-Intro: zentrierte Einleitung, darunter der rose
   Eigenschaftenkasten neben dem Fliesstext. Die Spalten haengen an
   .flexwrap / .flexbox aus den Utilities, hier steht nur, was die Sektion
   selbst mitbringt. */
p.ddm_lead{
	/* Der Abschnitt steht im regulaeren Container. Der bleibt fuer zentrierten
	   Fliesstext zu breit, deshalb ein eigenes Zeilenmass. */
	box-sizing: border-box;
	width: 1260px;
	max-width: 100%;
	margin: 0px auto 0px auto;
	font-size: 22px;
	line-height: 34px;
}
/* Mehrteilige Einleitungen: der Abstand gehoert zwischen die Absaetze, nicht
   an den Block - sonst wandert er in die Sektionsabstaende. */
p.ddm_lead._follow{
	margin-top: 24px;
}
/* Linksbuendige Einleitung: dieselbe Textstufe, aber ueber die volle
   Containerbreite statt auf das zentrierte Zeilenmass beschnitten. */
p.ddm_lead._wide{
	width: 100%;
	margin-left: 0px;
	margin-right: 0px;
}
/* Zeilenmass der Einleitung als Containerbreite. Die Wissens-Seiten fuehren
   ihre Abschnitte genauso breit wie den Einleitungstext darueber, statt den
   regulaeren Container auszureizen. Die max-width von .main-container bleibt
   stehen, damit beide auf schmalen Fenstern denselben Rand behalten. */
.main-container.ddm_leadwidth{
	width: 1260px;
}

.ddm_featcard{
	box-sizing: border-box;
	padding: 46px 44px 44px 44px;
	border-radius: 18px;
}
.ddm_featcard_title{
	font-size: 30px;
	line-height: 40px;
}
.ddm_featlist{
	margin: 34px 0px 0px 0px;
	list-style: none;
}
.ddm_featlist li{
	position: relative;
	margin: 0px;
	padding-left: 26px;
	font-size: 17px;
	line-height: 26px;
}
.ddm_featlist li + li{
	margin-top: 14px;
}
/* Mittige Aufzaehlung: jeder Punkt wird nur so breit wie sein Inhalt und steht
   damit selbst mittig. Das Pluszeichen bleibt dabei am Punkt haengen und
   wandert nicht an den Rand des Blocks, wie es bei text-align passieren wuerde. */
.ddm_featlist._center li{
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Schmale, mittige Spalte fuer kurze Aufzaehlungen. Ueber die volle Leadbreite
   stehen drei bis fuenf kurze Punkte viel zu weit auseinander; hier ruecken sie
   zusammen. Der Text bleibt dabei linksbuendig - mittig steht der Block, nicht
   die Zeile. */
.ddm_pointblock{
	box-sizing: border-box;
	width: 720px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Kurze Punkte laufen einspaltig ueber die volle Breite zu weit auseinander -
   dann lieber nebeneinander. Die Spalten teilt der Browser selbst auf. */
.ddm_featlist._cols2{
	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
	-webkit-column-gap: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;
}
/* In Spalten sitzt der Abstand am Punkt selbst - li + li greift ueber den
   Spaltenumbruch hinweg nicht mehr sauber. */
.ddm_featlist._cols2 li{
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
	margin-top: 0px;
	margin-bottom: 14px;
}
/* Schlusssatz im Kasten, unter der Punkteliste - eine Stufe leiser als die
   Punkte, damit die Liste die Karte weiter traegt. */
p.ddm_featnote{
	margin: 26px 0px 0px 0px;
	font-size: 15px;
	line-height: 24px;
}
/* Pluszeichen statt Punkt, haengend vor dem Text */
.ddm_featlist li::before{
	content: '+';
	position: absolute;
	left: 0px;
	top: 0px;
	font-family: 'Avenir-Medium', sans-serif;
}
.ddm_featcard .ddm_btn{
	margin-top: 44px;
	margin-bottom: 0px;
}
/* Der Fliesstext setzt auf der Hoehe des Kasteninhalts an, nicht an dessen
   Oberkante - sonst stehen Ueberschrift und erste Textzeile versetzt. */
.leistung_text{
	padding-top: 46px;
}
.leistung_text p{
	font-size: 17px;
	line-height: 27px;
}
/* Zwischenueberschrift im Fliesstext - eine Stufe unter der Kastenueberschrift,
   den Abstand nach unten bringt der erste Absatz mit. */
.leistung_text_title{
	font-size: 24px;
	line-height: 32px;
}
.leistung_text .ddm_btn{
	margin-top: 26px;
	margin-bottom: 0px;
}


/* GUT ZU WISSEN - DACHTYPEN
   Je Dachtyp eine Zeile, gerendert von ddm_renderDachtypSection(): links
   Ueberschrift mit Leitsatz und Fliesstext, rechts der Eigenschaftenkasten und
   darunter der Kontakt-Button. Spalten und Karte kommen aus .flexwrap /
   .flexbox und .ddm_featcard - hier steht nur, was der Abschnitt mitbringt. */
.dachtyp + .dachtyp{
	margin-top: 140px;
}
/* Die Textspalte setzt so tief an, dass die Grundlinie der Ueberschrift auf der
   Grundlinie der Kastenueberschrift liegt - die Karte beginnt also sichtbar
   oberhalb des Dachtypnamens. */
.dachtyp_text{
	padding-top: 30px;
}
/* Eine Stufe unter dem Seiten-Intro und im selben leichten Schnitt - der
   Dachtypname fuehrt den Abschnitt an, ohne der Seitenueberschrift den Rang
   abzulaufen. */
.dachtyp_title{
	font-family: 'Avenir-Light', sans-serif;
	font-size: 50px;
	line-height: 60px;
}
/* Der Leitsatz ist die zweite Zeile derselben Ueberschrift und deshalb kein
   eigenes Element mit eigenem Abstand. */
.dachtyp_claim{
	display: block;
	font-size: 38px;
	line-height: 48px;
}
/* Die Absaetze bringen ihren Abstand nach oben mit, unten schliesst die Spalte
   buendig ab - den Abstand zur naechsten Zeile setzt .dachtyp. Gleiches Gewicht
   wie .contstyles p, gewinnt ueber die Quellreihenfolge. */
.dachtyp_text p{
	margin-top: 26px;
	margin-bottom: 0px;
	font-size: 17px;
	line-height: 27px;
}
/* Der Button steht rechtsbuendig unter der Karte, nicht in ihr - deshalb
   traegt er hier seinen Abstand statt der Kastenregel. */
.ddm_cardactions{
	margin-top: 22px;
	text-align: right;
}
.ddm_cardactions .ddm_btn{
	margin-top: 0px;
	margin-bottom: 0px;
}


/* SCHICHTEN-SLIDER "DER AUFBAU EINES DACHES"
   Pfeil, Fenster, Pfeil. Im Fenster laeuft die Spur mit allen Folien; jede
   Folie ist genau so breit wie das Fenster, deshalb verschiebt sich die Spur je
   Schritt um volle 100%. Gesteuert von ddm_initStepSlider() in functions.js -
   kein Autoplay, dafuer in beide Richtungen endlos. */
.ddm_stepslider{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 24px;
	margin-top: 60px;
}
.ddm_stepslider_viewport{
	flex: 1 1 auto;
	min-width: 0px;
	overflow: hidden;
}
.ddm_stepslider_track{
	display: flex;
	flex-flow: row nowrap;
	-webkit-transition: transform 650ms cubic-bezier(.16, 1, .3, 1);
	transition: transform 650ms cubic-bezier(.16, 1, .3, 1);
}
/* Der Sprung hinter der Klonfolie darf nicht mitlaufen - sonst spult der
   Slider beim Umschlagen sichtbar zurueck. */
.ddm_stepslider_track._nojump{
	-webkit-transition: none;
	transition: none;
}
.ddm_stepslider_slide{
	flex: 0 0 100%;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
	gap: 44px;
	box-sizing: border-box;
	padding: 0px 20px;
}
/* Die Ziffer traegt den Abschnitt optisch - sie steht bewusst gross und ohne
   eigene Zeilenhoehe, damit sie neben dem Text nicht aufbaut. */
.ddm_stepslider_num{
	flex: 0 0 auto;
	font-family: 'Avenir-Medium', sans-serif;
	font-size: 210px;
	line-height: 210px;
}
.ddm_stepslider_body{
	flex: 0 1 auto;
	width: 620px;
}
.ddm_stepslider_title{
	font-size: 42px;
	line-height: 52px;
}
p.ddm_stepslider_text{
	margin: 20px 0px 0px 0px;
	font-size: 17px;
	line-height: 27px;
}

/* Pfeile: nur Strich und Hausfarbe, die Flaeche bleibt frei */
.ddm_stepslider_nav{
	flex: 0 0 auto;
	display: block;
	box-sizing: border-box;
	padding: 10px;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
	-webkit-transition: transform 250ms cubic-bezier(.2, .7, .2, 1), opacity 250ms ease;
	transition: transform 250ms cubic-bezier(.2, .7, .2, 1), opacity 250ms ease;
}
.ddm_stepslider_chevron{
	display: block;
	width: 26px;
	height: 48px;
}
.ddm_stepslider_nav._next .ddm_stepslider_chevron{
	transform: scaleX(-1);
}
.ddm_stepslider_nav:hover{
	opacity: 0.65;
}
.ddm_stepslider_nav._prev:hover{
	transform: translateX(-4px);
}
.ddm_stepslider_nav._next:hover{
	transform: translateX(4px);
}
.ddm_stepslider_nav:focus-visible{
	outline: 2px solid #002643;
	outline-offset: 4px;
}


/* EINBETTUNG MIT EINWILLIGUNG
   Der IFrame steht ohne src im Markup und bleibt verborgen, bis Klaro die
   Adresse aus data-src nachtraegt. Solange keine Einwilligung vorliegt, steht
   der Hinweiskasten an seiner Stelle; ddm_renderConsentEmbed() liefert beides,
   die Umschaltung macht functions.js ueber ._granted. */
.ddm_embed{
	position: relative;
	display: block;
	width: 100%;
}
.ddm_embed_notice{
	box-sizing: border-box;
	padding: 46px 44px 44px 44px;
	border-radius: 18px;
	text-align: center;
}
.ddm_embed._granted .ddm_embed_notice{
	display: none;
}
.ddm_embed_notice_title{
	font-size: 30px;
	line-height: 40px;
}
p.ddm_embed_notice_text{
	width: 640px;
	max-width: 100%;
	margin: 22px auto 0px auto;
	font-size: 17px;
	line-height: 27px;
}
.ddm_embed_notice .ddm_btn{
	margin-top: 34px;
	margin-bottom: 0px;
}
/* Zweiter Weg neben dem Knopf: der ganze Dialog statt nur dieses Angebot */
.ddm_embed_settings{
	display: block;
	margin: 20px auto 0px auto;
	padding: 0px;
	border: none;
	background: none;
	font-family: 'Avenir-Book', sans-serif;
	font-size: 15px;
	line-height: 24px;
	text-decoration: underline;
	cursor: pointer;
}
/* Erst mit der Einwilligung nimmt der Rahmen Platz ein - vorher gaebe es nur
   eine leere Flaeche unter dem Hinweis. */
.ddm_embed_frame{
	display: none;
	width: 100%;
	border: 0px;
}
.ddm_embed._granted .ddm_embed_frame{
	display: block;
}


/* VELUX KONFIGURATOR - HINWEISE ZUR DATENVERARBEITUNG
   Fliesstext in der Breite der Einleitung. Die Aufzaehlungen gehoeren jeweils
   zu ihrem Einleitungssatz und stehen deshalb enger als der Absatzabstand. */
.ddm_notes p{
	margin-top: 26px;
	margin-bottom: 0px;
}
.ddm_notes ul{
	margin: 8px 0px 0px 25px;
}
.ddm_notes li{
	margin: 0px;
}
p.ddm_notes_link{
	margin-top: 34px;
}
/* Schliesst der Textblock an ein Raster an, braucht er mehr Luft als zwischen
   zwei Absaetzen - sonst klebt er an der Kartenkante. */
.ddm_badgegrid + .ddm_notes,
.ddm_downloads + .ddm_notes{
	margin-top: 20px;
}


/* ZEITLEISTE
   Die Jahre liegen nebeneinander auf einer Linie. Beim Scrollen bleibt die
   Buehne (Ueberschrift, Einleitung, Streifen) stehen und der Streifen faehrt
   quer durch die Jahre; danach scrollt die Seite normal weiter. Das Mitfahren
   schaltet ddm_initTimeline() in functions.js ueber ._pinned zu - ohne die
   Klasse ist es ein Streifen, der sich wischen und per Tastatur fahren laesst.
   Bedingung fuer das Stehenbleiben (sticky): kein Vorfahre darf ein
   Scrollbereich sein - deshalb overflow-x: clip statt hidden an body/html. */
.ddm_timeline{
	position: relative;
}
.ddm_timeline_body{
	margin-top: 50px;
}

/* Der Kasten wird vom Skript um den Fahrweg hoeher gesetzt; solange er durch
   das Fenster laeuft, bleibt die Buehne darin stehen. Den Abstand nach oben
   rechnet das Skript aus, damit die Buehne mittig unter dem Kopf steht. */
.ddm_timeline._pinned .ddm_timeline_stage{
	position: -webkit-sticky;
	position: sticky;
}
.ddm_timeline._pinned .ddm_timeline_scroller{
	overflow: hidden;
}
.ddm_timeline._pinned .ddm_timeline_track{
	will-change: transform;
}

/* Der Streifen laeuft ueber die volle Fensterbreite: der erste Eintrag steht
   weiterhin an der Containerkante, nach rechts laeuft die Reihe aber bis an den
   Fensterrand und darueber hinaus. Der negative Aussenabstand zieht den Kasten
   an den Fensterrand, die Innenkanten holen die Containerkanten wieder herein -
   Anfang und Ende sitzen damit buendig zum uebrigen Inhalt, gefahren wird aber
   von Fensterrand zu Fensterrand. */
/* Bewusst ohne scroll-snap: das Einrasten wuerde die linke Innenkante sofort
   wegscrollen und den ersten Eintrag an den Fensterrand ziehen. */
.ddm_timeline_scroller{
	box-sizing: border-box;
	width: 100vw;
	margin-left: calc((100% - 100vw) / 2);
	padding-left: calc((100vw - 100%) / 2);
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	/* Der Systembalken wuerde hier nur stoeren - gefahren wird per Scrollen
	   der Seite, ohne Mitfahren per Wischen und Tastatur. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.ddm_timeline_scroller::-webkit-scrollbar{
	display: none;
}
.ddm_timeline_scroller:focus-visible{
	outline: 2px solid #002643;
	outline-offset: 4px;
}
.ddm_timeline_track{
	display: flex;
	flex-flow: row nowrap;
	align-items: stretch;
	margin: 0px;
	list-style: none;
}
/* Der Abstand zum naechsten Eintrag steckt in der Innenkante, damit die Linie
   ihn ueberbruecken kann - deshalb liegt er als eigener Wert vor. */
.ddm_timeline_item{
	--ddm_timeline_gap: 34px;
	flex: 0 0 320px;
	box-sizing: border-box;
	margin: 0px;
	padding-right: var(--ddm_timeline_gap);
}
.ddm_timeline_year{
	display: block;
	font-family: 'Avenir-Light', sans-serif;
	font-size: 46px;
	line-height: 56px;
}
/* Die Linie laeuft durch alle Eintraege durch und traegt je Eintrag einen
   Punkt - daraus entsteht die eigentliche Leiste. Sie greift bis in die
   Innenkante hinein, sonst risse sie zwischen zwei Eintraegen ab. */
.ddm_timeline_mark{
	position: relative;
	display: block;
	width: calc(100% + var(--ddm_timeline_gap));
	height: 2px;
	margin: 14px 0px 24px 0px;
}
.ddm_timeline_dot{
	position: absolute;
	left: 0px;
	top: -6px;
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
}
.ddm_timeline_title{
	font-size: 21px;
	line-height: 29px;
}
p.ddm_timeline_text{
	margin: 14px 0px 0px 0px;
	font-size: 16px;
	line-height: 25px;
}
/* Beim letzten Eintrag endet die Linie mit dem Text - dahinter kommt nichts
   mehr, das sie verbinden muesste, und das Ende sitzt so auf der Containerkante. */
.ddm_timeline_item:last-child .ddm_timeline_mark{
	width: 100%;
}
/* Eintraege, die von rechts erst hereinfahren, stehen zurueckgenommen, bis sie
   ganz im Bild sind - die Leiste liest sich so von links nach rechts. Nur beim
   Mitfahren; ohne das Skript sind alle Eintraege voll da. */
.ddm_timeline._pinned .ddm_timeline_item{
	-webkit-transition: opacity 400ms ease;
	transition: opacity 400ms ease;
}
.ddm_timeline._pinned .ddm_timeline_item._ahead{
	opacity: 0.3;
}

/* Fortschrittsleiste in Containerbreite unter dem Streifen - erklaert, warum
   die Seite gerade steht, und zeigt, wie weit es noch ist. Gibt es nur beim
   Mitfahren. Die Fuellung skaliert, statt ihre Breite zu aendern, damit das
   Mitlaufen kein Neuberechnen des Layouts ausloest. */
.ddm_timeline_progress{
	display: none;
	position: relative;
	height: 2px;
	margin-top: 46px;
	overflow: hidden;
	border-radius: 1px;
}
.ddm_timeline._pinned .ddm_timeline_progress{
	display: block;
}
.ddm_timeline_progress_fill{
	position: absolute;
	left: 0px;
	top: 0px;
	display: block;
	width: 100%;
	height: 100%;
	transform: scaleX(0);
	transform-origin: left center;
}


/* REFERENZGALERIE - BILDERSTAPEL
   Die Bilder liegen versetzt uebereinander, oben das gezeigte, dahinter zwei
   angedeutete. Die Lage im Stapel steht als Klasse an der Karte (_d0 oben,
   _d1, _d2, _dn fuer alle verdeckten); ddm_initReferenceGallery() in
   functions.js verteilt sie neu und spielt das Mischen ab. */
.ddm_pile{
	/* Versatz je Lage. Der Stapel nimmt zwei Versaetze Platz ein - die steckt
	   das Deck als Innenkante rechts und unten, damit der Stapel nicht ueber
	   den Container hinaus ragt. */
	--ddm_pile_off: 52px;
	position: relative;
}
.ddm_pile_nav{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 6px;
	margin-bottom: 34px;
}
.ddm_pile_arrow{
	display: block;
	box-sizing: border-box;
	padding: 10px;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
	-webkit-transition: transform 250ms cubic-bezier(.2, .7, .2, 1), opacity 250ms ease;
	transition: transform 250ms cubic-bezier(.2, .7, .2, 1), opacity 250ms ease;
}
.ddm_pile_arrow:hover{
	opacity: 0.65;
}
.ddm_pile_arrow._prev:hover{
	transform: translateX(-4px);
}
.ddm_pile_arrow._next:hover{
	transform: translateX(4px);
}
.ddm_pile_arrow:focus-visible{
	outline: 2px solid #002643;
	outline-offset: 4px;
}
.ddm_pile_chevron{
	display: block;
	width: 26px;
	height: 48px;
}
.ddm_pile_arrow._next .ddm_pile_chevron{
	transform: scaleX(-1);
}
/* Position im Stapel - im Endloslauf die einzige Orientierung */
p.ddm_pile_count{
	margin-left: 26px;
	font-family: 'Avenir-Light', sans-serif;
	font-size: 22px;
	line-height: 30px;
	font-variant-numeric: tabular-nums;
}
.ddm_pile_current{
	font-family: 'Avenir-Medium', sans-serif;
}

.ddm_pile_deck{
	padding: 0px calc(var(--ddm_pile_off) * 2) calc(var(--ddm_pile_off) * 2) 0px;
}
/* Ein festes Format fuer den ganzen Stapel. Die Fotos kommen in 4:3 und 3:2;
   16:10 liegt dazwischen und beschneidet beide nur wenig. */
.ddm_pile_frame{
	position: relative;
	aspect-ratio: 16 / 10;
}
.ddm_pile_card{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	margin: 0px;
	overflow: hidden;
	border-radius: 32px;
	box-shadow: 0px 26px 50px -28px rgba(0, 38, 67, 0.45);
	/* Die Karten dahinter ruecken erst nach, wenn die obere aus dem Weg ist */
	-webkit-transition: transform 520ms cubic-bezier(.22, .8, .24, 1) 110ms, opacity 520ms ease 110ms;
	transition: transform 520ms cubic-bezier(.22, .8, .24, 1) 110ms, opacity 520ms ease 110ms;
}
.ddm_pile_img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
/* Schleier in der Hintergrundfarbe: die hinteren Lagen wirken ausgewaschen,
   ohne dass das Bild darunter durchscheint wie bei einer Deckkraft. */
.ddm_pile_card::after{
	content: '';
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: #f1f2f9;
	opacity: 0;
	pointer-events: none;
	-webkit-transition: opacity 520ms ease 110ms;
	transition: opacity 520ms ease 110ms;
}
.ddm_pile_card._d0{
	z-index: 30;
	transform: translate(0px, 0px);
}
.ddm_pile_card._d1{
	z-index: 20;
	transform: translate(var(--ddm_pile_off), var(--ddm_pile_off));
}
.ddm_pile_card._d1::after{
	opacity: 0.45;
}
.ddm_pile_card._d2,
.ddm_pile_card._dn{
	z-index: 10;
	transform: translate(calc(var(--ddm_pile_off) * 2), calc(var(--ddm_pile_off) * 2));
}
.ddm_pile_card._d2::after{
	opacity: 0.7;
}
/* Verdeckte Karten warten unsichtbar hinter der letzten Lage */
.ddm_pile_card._dn{
	z-index: 0;
	opacity: 0;
}

/* MISCHEN
   Die bewegte Karte bekommt ihre Ziellage sofort als Klasse; die Animation
   beschreibt nur den Weg dorthin. Weil der 100%-Schritt fehlt, endet sie genau
   auf den Werten der Klasse - ohne Sprung, egal in welche Lage die Karte
   faellt. Der Wechsel des z-index um die Mitte herum laesst die Karte seitlich
   neben dem Stapel die Ebene tauschen, wo man es nicht sieht. */
.ddm_pile_card._tonext{
	-webkit-animation: ddm_pile_tonext 640ms cubic-bezier(.45, 0, .2, 1) both;
	animation: ddm_pile_tonext 640ms cubic-bezier(.45, 0, .2, 1) both;
}
.ddm_pile_card._fromprev{
	-webkit-animation: ddm_pile_fromprev 640ms cubic-bezier(.45, 0, .2, 1) both;
	animation: ddm_pile_fromprev 640ms cubic-bezier(.45, 0, .2, 1) both;
}
@keyframes ddm_pile_tonext{
	0%{
		z-index: 40;
		opacity: 1;
		transform: translate(0px, 0px) rotate(0deg);
	}
	46%{
		z-index: 40;
		opacity: 1;
		transform: translate(-56%, 2%) rotate(-4deg);
	}
	47%{
		z-index: 1;
	}
}
@keyframes ddm_pile_fromprev{
	0%{
		z-index: 1;
		opacity: 0;
		transform: translate(calc(var(--ddm_pile_off) * 2), calc(var(--ddm_pile_off) * 2)) rotate(0deg);
	}
	26%{
		opacity: 1;
	}
	46%{
		z-index: 1;
		opacity: 1;
		transform: translate(-56%, 2%) rotate(-4deg);
	}
	47%{
		z-index: 40;
	}
}


/* ZERTIFIKATE - SIEGELRASTER
   Vier helle Karten mit dem Siegel darueber und dem Namen darunter. Die Siegel
   haben sehr unterschiedliche Formate, deshalb bekommt jedes eine gleich hohe
   Flaeche und wird darin eingepasst - beschneiden wuerde Logos anschneiden. */
.ddm_badgegrid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
	gap: 24px;
	margin-top: 60px;
}
.ddm_badge{
	display: flex;
	flex-flow: column nowrap;
	box-sizing: border-box;
	padding: 34px 28px 30px 28px;
	border-radius: 18px;
	text-align: center;
}
.ddm_badge_media{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 110px;
	margin-bottom: 28px;
}
.ddm_badge_media img{
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
}
.ddm_badge_title{
	font-size: 20px;
	line-height: 28px;
}
/* Die Zusatzzeile steht immer am Fuss der Karte, damit die Namen der vier
   Nachweise trotz unterschiedlicher Laenge auf einer Linie bleiben. */
p.ddm_badge_text{
	margin: 6px 0px 0px 0px;
	font-size: 16px;
	line-height: 25px;
}


/* DOWNLOADS
   Je Dokument eine Zeile: Sinnbild, Name mit Dateiangabe, rechts der Knopf.
   Die ganze Zeile ist der Link - der Knopf ist deshalb nur ein span und darf
   kein eigenes a sein. */
.ddm_downloads{
	display: flex;
	flex-flow: column nowrap;
	gap: 16px;
	margin-top: 60px;
}
.ddm_download{
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	gap: 26px;
	box-sizing: border-box;
	padding: 26px 30px 26px 30px;
	border-radius: 18px;
}
.ddm_download:hover,
.ddm_download:focus-visible{
	text-decoration: none;
	transform: translateX(4px);
	-webkit-box-shadow: 0px 8px 20px rgba(0, 38, 67, 0.14);
	-moz-box-shadow: 0px 8px 20px rgba(0, 38, 67, 0.14);
	box-shadow: 0px 8px 20px rgba(0, 38, 67, 0.14);
}
.ddm_download_media{
	flex: 0 0 auto;
	display: block;
}
.ddm_download_icon{
	display: block;
	width: 34px;
	height: 41px;
}
.ddm_download_body{
	flex: 1 1 auto;
	display: block;
	min-width: 0px;
}
.ddm_download_title{
	display: block;
	font-family: 'Avenir-Medium', sans-serif;
	font-size: 20px;
	line-height: 28px;
}
.ddm_download_text{
	display: block;
	margin-top: 2px;
	font-size: 16px;
	line-height: 25px;
}
/* Dateiart und Groesse sind Beiwerk und stehen deshalb eine Stufe leiser */
.ddm_download_meta{
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 22px;
	letter-spacing: 1px;
	opacity: 0.7;
}
.ddm_download_action{
	flex: 0 0 auto;
	margin-top: 0px;
	margin-bottom: 0px;
}
/* Der Knopf liegt in der Zeile - ohne das hier ruckelt beim Ueberfahren beides
   gleichzeitig, die Zeile und der Knopf darin. */
.ddm_download_action:hover{
	transform: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.ddm_download:focus-visible{
	outline: 2px solid #002643;
	outline-offset: 3px;
}
/* Der Knopf reagiert auf die ganze Zeile, nicht nur auf sich selbst */
.ddm_download:hover .ddm_btn_fill,
.ddm_download:focus-visible .ddm_btn_fill{
	transform: scaleX(1);
}
.ddm_download:hover .ddm_btn_label,
.ddm_download:focus-visible .ddm_btn_label{
	color: #ffffff;
}


/* MATERIALIEN - KARTENRASTER
   Je Material eine Karte: Foto, Name, Kurztext und als Abschluss Vor- und
   Nachteile. Zwei Spalten - bei acht Materialien bleiben so vier ruhige Reihen,
   und die Fotos stehen gross genug, um das Material erkennbar zu machen. */
.material_grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: stretch;
	gap: 30px;
	margin-top: 70px;
}
/* overflow schneidet das Foto an den runden Ecken ab, flex haelt die Karte auf
   voller Rasterhoehe - sonst haengt sie bei kurzem Text in der Luft. */
.material_card{
	display: flex;
	flex-flow: column nowrap;
	overflow: hidden;
	border-radius: 18px;
}
.material_media{
	display: block;
	width: 100%;
	aspect-ratio: 8 / 3;
	overflow: hidden;
}
.material_media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
.material_body{
	flex: 1 1 auto;
	display: flex;
	flex-flow: column nowrap;
	box-sizing: border-box;
	padding: 34px 36px 32px 36px;
}
.material_title{
	font-size: 26px;
	line-height: 34px;
}
p.material_text{
	margin: 18px 0px 0px 0px;
	font-size: 17px;
	line-height: 27px;
}
/* Vor- und Nachteile schliessen jede Karte ab und stehen deshalb immer unten,
   auch wenn der Text darueber kuerzer ausfaellt. */
.material_notes{
	margin-top: auto;
	padding-top: 26px;
}
p.material_note{
	margin: 0px;
	font-size: 16px;
	line-height: 25px;
}
p.material_note + p.material_note{
	margin-top: 10px;
}
.material_note_label{
	font-family: 'Avenir-Medium', sans-serif;
}


/* WARUM DIE LEGETECHNIK SO ENTSCHEIDEND IST
   Linksbuendiger Textabschnitt ueber die volle Containerbreite: Ueberschrift,
   Einleitung, die Aufzaehlung und zum Schluss der rose Fazitkasten. */
.legetechnik_why_title{
	font-family: 'Avenir-Light', sans-serif;
	font-size: 46px;
	line-height: 56px;
}
.legetechnik_why p.ddm_lead{
	margin-top: 30px;
}
/* Die Aufzaehlung steht enger als der Fliesstext - sie ist eine Liste, kein
   Absatzblock. Gleiches Gewicht wie .contstyles p / li, gewinnt ueber die
   Quellreihenfolge. */
.legetechnik_why_points{
	margin-top: 46px;
}
.legetechnik_why_points p{
	margin: 0px;
	font-size: 17px;
	line-height: 27px;
}
.legetechnik_why_points ul{
	margin: 6px 0px 0px 22px;
}
.legetechnik_why_points li{
	margin: 0px;
	font-size: 17px;
	line-height: 27px;
}
/* Flacher als der Eigenschaftenkasten - der Fazitkasten laeuft ueber die
   ganze Breite und braucht deshalb weniger Hoehe. */
.ddm_conclusion{
	margin-top: 60px;
	padding: 32px 40px 34px 40px;
}
.ddm_conclusion_label{
	font-size: 16px;
	line-height: 26px;
	letter-spacing: 1px;
}
p.ddm_conclusion_text{
	margin: 14px 0px 0px 0px;
	font-size: 17px;
	line-height: 27px;
}


/* VORTEILSBLASEN
   Links die Anrede, rechts die Vorteile als einzelne Blasen untereinander.
   Gerendert von ddm_renderBubbleList(). Die Spalten haengen an
   .flexwrap / .flexbox, hier steht nur, was der Abschnitt selbst mitbringt. */
.ddm_bubbles_intro{
	/* Der Text steht mittig zur Blasenreihe, nicht an deren Oberkante. */
	align-self: center;
}
p.ddm_bubbles_label{
	margin: 0px;
	font-size: 22px;
	line-height: 32px;
}
p.ddm_bubbles_text{
	margin: 10px 0px 0px 0px;
	font-size: 22px;
	line-height: 32px;
}
.ddm_bubblelist{
	margin: 0px;
	padding: 0px;
	list-style: none;
}
/* Jede Blase wird nur so breit wie ihr Text und steht damit selbst mittig auf
   der Spalte - wie bei .ddm_featlist._center, nur als Flaeche statt als Zeile. */
.ddm_bubblelist li{
	position: relative;
	box-sizing: border-box;
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 11px 26px 12px 42px;
	border-radius: 999px;
	font-size: 16px;
	line-height: 24px;
	-webkit-box-shadow: 0px 6px 16px rgba(0, 38, 67, 0.12);
	box-shadow: 0px 6px 16px rgba(0, 38, 67, 0.12);
}
.ddm_bubblelist li + li{
	margin-top: 12px;
}
/* Pluszeichen haengend vor dem Text, wie in .ddm_featlist */
.ddm_bubblelist li::before{
	content: '+';
	position: absolute;
	left: 26px;
	top: 11px;
	font-family: 'Avenir-Medium', sans-serif;
}
/* Der Versatz je Zeile nimmt der Reihe die Strenge. Er ist fest gesetzt und
   nicht zufaellig - so steht das Bild in jedem Browser gleich. Die Kette
   wiederholt sich alle sieben Blasen, damit auch eine laengere Liste den
   lockeren Rhythmus behaelt. */
.ddm_bubblelist li:nth-child(7n+1){ -webkit-transform: translateX(-10px); transform: translateX(-10px); }
.ddm_bubblelist li:nth-child(7n+2){ -webkit-transform: translateX(-18px); transform: translateX(-18px); }
.ddm_bubblelist li:nth-child(7n+3){ -webkit-transform: translateX(24px);  transform: translateX(24px); }
.ddm_bubblelist li:nth-child(7n+4){ -webkit-transform: translateX(-12px); transform: translateX(-12px); }
.ddm_bubblelist li:nth-child(7n+5){ -webkit-transform: translateX(-26px); transform: translateX(-26px); }
.ddm_bubblelist li:nth-child(7n+6){ -webkit-transform: translateX(20px);  transform: translateX(20px); }
.ddm_bubblelist li:nth-child(7n+7){ -webkit-transform: translateX(-22px); transform: translateX(-22px); }


/* JOBS - AUSBILDUNG
   Der Ausbildungsabschnitt am Ende von content_jobs: Seitentext, kein Datensatz
   aus mod_ddm_jobs, aber im Bild einer Ausschreibung - Ueberschrift mit roser
   Linie, links Titel, Text und Bewerbungsknopf, rechts die Kaesten. Die Masse
   folgen ddm_jobs.css; das Modulstylesheet laedt nur, solange das Modul
   ausgegeben wird, deshalb stehen sie hier noch einmal. Wer dort Kaesten oder
   Schriftgroessen aendert, aendert sie hier mit. */
.jobs_training_headline{
	margin: 0px;
	border-bottom: 2px solid;
	padding-bottom: 26px;
	font-family: 'Avenir-Light', sans-serif;
	font-size: 46px;
	line-height: 56px;
}
.jobs_training{
	margin-top: 120px;
	align-items: flex-start;
}
/* Blocksatz mit Trennung wie in den Ausschreibungen */
.jobs_training_text{
	text-align: justify;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
.jobs_training .jobs_training_title{
	margin: 0px;
	font-size: 26px;
	line-height: 35px;
	-webkit-hyphens: manual;
	-ms-hyphens: manual;
	hyphens: manual;
	text-align: left;
}
.jobs_training_name{
	font-family: 'Avenir-Medium', sans-serif;
}
.jobs_training_claim{
	display: block;
	font-family: 'Avenir-Light', sans-serif;
}
.jobs_training .jobs_training_body{
	margin-top: 30px;
}
.jobs_training .jobs_training_body p{
	margin: 0px;
	font-size: 17px;
	line-height: 27px;
}
.jobs_training .jobs_training_body p + p{
	margin-top: 20px;
}
.jobs_training .jobs_training_text .ddm_btn{
	margin-top: 44px;
	margin-bottom: 0px;
}

/* Drei Kaesten statt zwei: zu zweit im Raster, ein ungerader letzter Kasten
   nimmt die ganze Spaltenbreite. Anders als in den Ausschreibungen sind die
   Kaesten einer Reihe gleich hoch - bei zwei Reihen wuerde der Hoehenversatz
   der ersten sonst als Loch ueber der zweiten stehen. */
.jobs_training .jobs_training_cards{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 30px;
}
.jobs_training_card{
	box-sizing: border-box;
	padding: 30px 28px 32px 28px;
	border-radius: 14px;
}
.jobs_training_card:last-child:nth-child(odd){
	grid-column: 1 / -1;
}
.jobs_training .jobs_training_card_title{
	margin: 0px;
	font-family: 'Avenir-Book', sans-serif;
	font-size: 20px;
	line-height: 28px;
}
.jobs_training .jobs_training_card_body{
	margin-top: 22px;
	text-align: left;
}
.jobs_training .jobs_training_card_body ul{
	margin: 0px;
	padding-left: 18px;
}
.jobs_training .jobs_training_card_body li,
.jobs_training .jobs_training_card_body p{
	margin: 0px 0px 9px 0px;
	font-size: 15px;
	line-height: 22px;
}
.jobs_training .jobs_training_card_body li:last-child,
.jobs_training .jobs_training_card_body p:last-child{
	margin-bottom: 0px;
}
/* Ueber die ganze Spaltenbreite laufen die kurzen Punkte zu weit auseinander -
   dort zweispaltig. Der Einzug sitzt am Punkt statt an der Liste, sonst hinge
   der Aufzaehlungspunkt der zweiten Spalte im Spaltenabstand. */
/* Jeder Punkt behaelt seinen Abstand nach unten, damit beide Spalten gleich
   rechnen; die Liste nimmt ihn am Ende wieder zurueck. */
.jobs_training .jobs_training_card:last-child:nth-child(odd) ul{
	margin-bottom: -9px;
	padding-left: 0px;
	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
	-webkit-column-gap: 40px;
	-moz-column-gap: 40px;
	column-gap: 40px;
}
.jobs_training .jobs_training_card:last-child:nth-child(odd) li{
	margin-left: 18px;
	-webkit-column-break-inside: avoid;
	break-inside: avoid;
}
.jobs_training .jobs_training_card:last-child:nth-child(odd) li:last-child{
	margin-bottom: 9px;
}


/* REFERENZEN & BERATUNG
   Sektionsueberschrift mit zwei versetzten Karten darunter, gerendert von
   ddm_renderReferenceTeaser(). Die Reihe ist deutlich schmaler als der
   Container und steht mittig, damit die Karten nicht auseinanderlaufen. */
.ddm_teaserrow{
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: start;
	gap: 20px;
	width: 900px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.ddm_teasercard{
	box-sizing: border-box;
	padding: 42px 38px 38px 38px;
	border-radius: 18px;
}
/* Die zweite Karte sitzt bewusst tiefer - der Versatz nimmt der Reihe die
   Strenge und greift den Rhythmus der Kontaktbox auf der Startseite auf.
   Gezaehlt wird ueber die Karte davor, nicht ueber die Kindposition - der
   Hinweiskasten steht sonst mit in der Reihe. */
.ddm_teasercard + .ddm_teasercard{
	margin-top: 60px;
}
.ddm_teasercard_title{
	font-size: 28px;
	line-height: 38px;
}
p.ddm_teasercard_text{
	margin: 30px 0px 0px 0px;
	font-size: 17px;
	line-height: 27px;
}
.ddm_teasercard .ddm_btn{
	margin-top: 38px;
	margin-bottom: 0px;
}
/* Hervorgehobenes Wort in der Akzentzeile. .ddm_headline span macht sonst aus
   jedem Span eine eigene Zeile - hier soll es eine bleiben. */
.ddm_headline .ddm_headline_strong{
	display: inline;
	font-family: 'Avenir-Black', sans-serif;
}
/* HINWEISKASTEN
   Er haengt bewusst aus der Kartenreihe heraus und ueberschneidet ihre obere
   linke Ecke - so liest er sich als Zuruf und nicht als dritte Karte. Neben der
   900px breiten Reihe bleibt im Container reichlich Platz dafuer; wird der
   knapp, stellt responsive.css ihn als normalen Block darueber. */
.ddm_teasernote{
	position: absolute;
	left: -230px;
	top: -150px;
	z-index: 1;
	box-sizing: border-box;
	width: 250px;
	padding: 18px 22px 20px 22px;
	border-radius: 14px;
}
p.ddm_teasernote_label{
	margin: 0px;
	font-size: 15px;
	line-height: 22px;
}
p.ddm_teasernote_text{
	margin: 6px 0px 0px 0px;
	font-size: 14px;
	line-height: 21px;
}


@media (prefers-reduced-motion: reduce){
	.page_intro .page_intro_text > *,
	.page_intro .page_intro_media,
	.page_intro .page_intro_roof{
		opacity: 1;
		transform: none;
		transition: none;
	}
	.ddm_btn._ghost .ddm_btn_label{
		transition: none;
	}
	/* Der Slider springt dann ohne Fahrt auf die naechste Folie -
	   ddm_initStepSlider() kuerzt seine Sperrzeit passend mit. */
	.ddm_stepslider_track,
	.ddm_stepslider_nav{
		transition: none;
	}
	.ddm_stepslider_nav:hover{
		transform: none;
	}
	/* Der Stapel tauscht dann ohne Mischen - ddm_initReferenceGallery()
	   verzichtet auch auf die Sperrzeit. */
	.ddm_pile_card,
	.ddm_pile_card::after,
	.ddm_pile_arrow{
		transition: none;
	}
	.ddm_pile_card._tonext,
	.ddm_pile_card._fromprev{
		animation: none;
	}
	.ddm_pile_arrow:hover{
		transform: none;
	}
}