/*
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;
	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;
}
.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. */
.intro_bg{
	position: absolute;
	left: 0px;
	top: -15%;
	z-index: 0;
	width: 100%;
	height: 130%;
	object-fit: cover;
	object-position: center center;
}
/* 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;
}

.page_intro_title{
	font-family: 'Avenir-Light', sans-serif;
	font-size: 72px;
	line-height: 80px;
	letter-spacing: 0px;
}
.page_intro_subtitle{
	display: block;
	font-size: 42px;
	line-height: 52px;
}
/* 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 und werden seitwaerts
   durchfahren - mit den Pfeilen, per Ziehen, per Wischen oder mit der Tastatur.
   Die Seite selbst scrollt normal weiter, nur dieser Streifen laeuft quer.
   Bedient von ddm_initTimelines() in functions.js. */
.ddm_timeline{
	position: relative;
	margin-top: 50px;
}
/* Die Pfeile stehen ueber dem Streifen statt darauf - auf dem Streifen wuerden
   sie die aeusseren Eintraege verdecken. */
.ddm_timeline_nav{
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 26px;
}
.ddm_timeline_arrow{
	display: block;
	box-sizing: border-box;
	padding: 8px 12px;
	border: none;
	background: none;
	color: inherit;
	cursor: pointer;
	-webkit-transition: opacity 250ms ease;
	transition: opacity 250ms ease;
}
.ddm_timeline_arrow:hover{
	opacity: 0.65;
}
/* Am Anfang bzw. Ende gibt es nichts mehr zu holen - der Pfeil bleibt stehen
   und sagt das auch, statt einfach nicht zu reagieren. */
.ddm_timeline_arrow._disabled{
	opacity: 0.25;
	cursor: default;
}
.ddm_timeline_arrow:focus-visible{
	outline: 2px solid #002643;
	outline-offset: 3px;
}
.ddm_timeline_chevron{
	display: block;
	width: 16px;
	height: 30px;
}
.ddm_timeline_arrow._next .ddm_timeline_chevron{
	transform: scaleX(-1);
}

/* 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. Die Pfeile
   fahren ohnehin genau einen Eintrag weit. */
.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;
	/* Die Leiste hat ihre eigene Bedienung - der Systembalken wuerde hier nur
	   stoeren. Sichtbar bleibt sie ueber Pfeile, Ziehen, 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_scroller._dragging{
	cursor: grabbing;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.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;
}


/* 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); }


/* 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;
	}
}