:root{
	--bgcolor-blue: #002b48;
	--bgcolor-dblue:#000b2d;
	--bgcolor-green: #081e08;
	--bgcolor-red: #2d0c01;
	--bgcolor-grey: #2c2c2c;
	--color-blue: #0099ff;
	--color-green: #339933;
	--color-green-accessible:#2D862D;
	--color-dgreen: #009999;
	--color-lgreen: #66cc99;
	--color-slgreen: #99cc00;
	--color-red: #ff6633;
	--color-grey: #999999;
	--color-turquoise: #00ffff;
	--color-dblue: #003366;
	--color-bblue: #0033cc;
	--bgcolor-blue: #002b48;
	--bgcolor-office: #fff6c4;
	--bgcolor-oneortwo: #d6ffd0;
	--bgcolor-family: #d0f0fa;
}

.dblau {
	color: var(--color-dblue);
}

.hblau {
	color:  var(--color-blue);
}

.blau {
	color:  var(--color-bblue);
}

.dgruen {
	color:var(--color-dgreen);
}

.gruen {
	color:#396 ;
	color:var(--color-green);
}

.hgruen {
	color:var(--color-lgreen);
}

.hhgruen {
	color:var(--color-slgreen);
}

.lila {
	color: #939;
}

.orange {
	color:var(--color-red);
}

.rot {
	color:#f33;
}
.tuerkis {
	color:#0ff;
	color:var(--color-turquoise);
}

html {
  height:101%;
}

body {
  background:var(--bgcolor-blue);
  background-image:url("../img/fassade_sw_cropped07.svg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position: center top;
  background-attachment:fixed;
  color:#333;
  font-family:Mulish, "Century Gothic", verdana, arial, helvetica, sans-serif;
  margin:auto;
  padding-top:3em;
  	padding-bottom:3em;
  vertical-align:middle;
  font-size:1em;
  -webkit-text-size-adjust: 100%;
  moz-text-size-adjust: 100%;
}

#wrapper {
	width:90vw;
	max-width:1200px;
	background-color:#fefefe;
	margin:0 auto;
	padding-top:1em
}

header {
	margin:1em 0;
	border-top:1px solid #333;
	border-bottom:1px solid #333;
	padding:0em;
}
.mmheader,
header .inside {
  padding: 0 2.2em 0 2.2em;
  display:flex;
  justify-content: space-between;
  box-sizin:border-box;
}


#corners1, #corners2, #corners3 {
	display:block;
	height:25px;
	padding:10px;
	content:" ";
	clear:both;
}

#corners1{
	margin-top:-23px;	
}

#corners2 {
	margin-bottom:-23px;
}

#corners3{
  margin-top: -11px;
  padding: 0 10px;
}

#corners1:before {
	background-image:url("../img/ecke_lo.gif");
	width:25px;
	height:25px;
	display: inline-block;
	content:"";
	float:left;
}

#corners1:after {
	background-image:url("../img/ecke_ro.gif");
	width:25px;
	height:25px;
	display: inline-block;
	content:"";
	float:right
}


#corners2:before, #corners3:before {
	background-image:url("../img/ecke_lu.gif");
	width:25px;
	height:25px;
	display: inline-block;
	content:"";
	float:left;
}

#corners2:after, #corners3:after {
	background-image:url("../img/ecke_ru.gif");
	width:25px;
	height:25px;
	display: inline-block;
	content:"";
	float:right
}

#container {
	display:flex;
}



#main {
	padding-left:35px;
	box-sizing: border-box;
	flex-basis: calc(100% - 18em);
	width:calc(100% - 18em);
 height:100%;
  background:#fefefe;
  margin-top:1em;
  margin-bottom:2em;
}


#main_wide {
  width:978px;
  height:110%;
  background:#fefefe;
  margin-right:auto;
  margin-left:auto;
  margin-top:10px;
  margin-bottom:20px;

}


footer {
	border-top:1px solid #333;
	margin-top:1em;
	font-size:0.8em;
	

}
footer .inside {
	padding: 0 15px 5px 15px;
}

footer p {
	text-align:center;
}

.logo {
flex-basis: 25em;
  height: auto;
  float: right;
  text-align: right;
  align-self:center;
}


.logo figure {
	line-height: 1;
}


.logo img {
	width:100%;
	height:auto;
	display: block;
}


header .content-gallery{
	float: left;
  flex-basis: calc(100% - 25em);
  width: calc(100% - 25em);
}

header .content-gallery ul li {
	margin-right:0.5em;
}




#right {
	flex-basis: 18em;
  display: flex;
  justify-content: stretch;
  box-sizing: border-box;
}


#right .inside {
padding-right: 22px;
  border-left: 1px dotted #333;
  margin-left: 2.5em;
  padding-left: 0;
  width: 15.5em;
  box-sizing: border-box;
}


.mod_mobile_menu {
  display: none;
}
.menu{
	 width:auto;
	 min-height:340px;
	 height:100%;
	float:right;	 
	border-right: 1px solid var(--color-grey);
	text-align:right;
    overflow:visible;
    margin-top:0.5em;
 }
 
 
 .menu .level_2 {
 	font-size:0.9em;
 	display:none;
 }
.trail>.level_2, .active>.level_2 {
	display:block;
}
.menu a, .menu strong{
	 display: block;
  font-size: 1.1em;
  padding: 0 1em 0.15em 0;
  color: #666;
  text-decoration: none;
  margin-right: -7px;
  background-repeat: no-repeat;
  background-position: right center;
  line-height: 2;
 }
 
 
 .menu .level_2 a, .menu .level_2 strong{
	 background-repeat:no-repeat;
	 background-position:right center;
	 background-size: 11px 11px; 
	 margin-right:-6px;
 }
 
.menu a:hover, .menu a:active, .menu a.active, .menu strong {
	 background-image:url(../img/kasterl_grau.gif);
	 color:#666;
	 display:block;
	 margin-right:-7px;
 }
 
 .menu .level_2 a, .menu .level_2 strong{
	 background-repeat:no-repeat;
	 background-position:right center;
	 background-size: 11px 11px; 
	 margin-right:-6px;
 }
 
.menu .architekt a:hover, 
.menu .architekt strong, 
.menu .architekt a.trail, 
.menu .architekt a:active {
	 background-image:url(../img/kasterl_orange.gif);
	 color:var(--color-red);
 }
 
.menu .phil a:hover, 
.menu .phil strong, 
.menu .phil a.trail, 
.menu .phil a:active {
	 background-image:url(../img/kasterl_blau.gif);
	 color:var(--color-bblue);
 }
.menu .kundmann a:hover, 
.menu .kundmann strong, 
.menu .kundmann a.trail, 
.menu .kundmann a:active  {
	 background-image:url(../img/kasterl_gruen.gif);
	 color:var(--color-green);
 }
.menu .kontakt a:hover, 
.menu .kontakt strong, 
.menu .kontakt a.trail, 
.menu .kontakt a:active {
	 background-image:url(../img/kasterl_blau.gif);
	 color:var(--color-bblue);
 }
 
.menu .bilder a:hover, 
.menu .bilder strong, 
.menu .bilder a.trail, 
.menu .bilder a:active {
	 background-image:url(../img/kasterl_hblau.gif);
	 color:var(--color-blue);
 }
 
.menu .trail {
	font-weight:600;
}

a {
	font-weight:normal;
	text-decoration:none;
	color:var(--color-blue);
}

a img{
	border:0;
}

div{
	border:0;
	padding:0;
	margin:0;
	border-spacing:0;
	border-collapse:collapse;
}


h1 {
	font-size:1.2em;
	font-size:1.3em;
	color:#666;

	margin:0;
	padding:0px 0px 20px 0px;
	text-transform:uppercase;
	
}

h1.bilder, .bilder h1 {

	color: var(--color-blue);
text-align:center;
	margin:0 0 1em 0;
	padding:0px 0px 10px 0px;
	text-transform:uppercase;
	
}

h2 {
	font-size:1.1em;
	font-size:1.2em;
	color:#666;

	margin:0px 0px 15px 0px;
	padding:0px 0px 7px 0px;
	text-transform:uppercase;
	padding-bottom:5px;
	border-bottom:1px solid #666;
	
	
}

h3{
	
	font-size:1.05em;
	font-size:1.1em;
	color:#666;

	margin:0;
	padding:0px 0px 3px 0px;
	text-transform:uppercase;
}

.architekt h1 {
	color:#f63;
}

.phil h1 {
	/* color:#6cf; */
	color:var(--color-bblue);
}

.kundmann h1 {
	color:var(--color-green);
}

h1.details_kund {
	color:var(--color-green);
	margin-left:180px;
}

.kundmann h2 {
    color:var(--color-green);
}

h2.details_kund {
	color:var(--color-bblue);
}

.architekt h2{
	color: var(--color-red);
}

h3.details{
	padding-bottom:5px;
	border-bottom:1px solid #666;
	margin:10px 0px 10px 0px;
}

h3.details_hblau{
	padding-bottom:5px;
	border-bottom:1px solid #666;
	color: var(--color-blue);
	margin:10px 0px 10px 0px;
}

h3.details_hgruen{
	padding-bottom:5px;
	border-bottom:1px solid #666;
	color: var(--color-lgreen);
	margin:10px 0px 10px 0px;
}

h3.details_dgruen{
	padding-bottom:5px;
	border-bottom:1px solid #666;
	color: var(--color-dgreen);
	margin:10px 0px 10px 0px;
}

h3.details_gruen{
	padding-bottom:5px;
	border-bottom:1px solid #666;
	color:#396;
	color:var(--color-green);
	margin:10px 0px 10px 0px;
}

h3.details_tuerkis {
	padding-bottom:5px;
	border-bottom:1px solid #666;
	color:#0c6;
	margin:10px 0px 10px 0px;
}

h4 {
	font-size:1em;
	color:#666;

	margin:0;
	padding:0px 0px 3px 0px;
	text-transform:uppercase;
}

/*img {
	width:100%;
	height:auto;
}*/

p {
	text-align:justify;
	color:#333;
	margin:0;
	padding:0px 0px 12px 0px;
	line-height:140%;
}

p.subtable {
	margin-left:80px;
	vertical-align:middle;
}

p.subtable img {
	
	vertical-align:middle;
}

#maintext_details p , #maintext_details li{
	color:#333;
}


ul {
	list-style-type:none;
	padding:5px 0px 25px 16px;
	margin:0;
	color:#333;
}

ul.gruen {
	list-style-image:url(../img/kasterl_gruenmin.gif);
	color:#333;
}

ul.dgruen {
	list-style-image:url(../img/kasterl_dgruenmin.gif);
	color:#333;
}

ul.hblau {
	list-style-image:url(../img/kasterl_hblaumin.gif);
	color:#333;
}

ul.blau {
	list-style-image:url(../img/kasterl_blaumin.gif);
	color:#333;
}

li {
	line-height:160%;
	padding:0;
	margin:0;
}

ul.blau li{
	
}

ul.dgruen li{
	
}
.right{
	float:right;
}

.left{
	float:left;
}


.clear_right{
	clear:right;
}




#headertop, #headerbottom, #bottom {
 background:#fefefe;
 background-image:url(../img/pixel_grau.gif);
 background-repeat:repeat-x;
 background-position: left 20px;
 height:40px;
 width:800px;
 margin:0;
 padding:0; 
 border:0;
}


.cornerleft {
	float:left;
	margin-top:9px;
	margin-left:20px;
}

.cornerright {
	float:right;	
	margin-top:9px;
	margin-right:20px;
}


#content {
	width:800px;
	min-height:340px;
	height:100%;
	
}

#content_wide {
	width:978px;
	min-height:340px;
	height:100%;
	
}

#content img.right{
	float:right;
	margin-left:10px;
}

#maintext {
	width:498px;
	min-height:340px;
	height:100%;
	margin:0;
	padding:5px 30px 0px 60px;
	border-right:1px dotted #999;
}

#maintext_wide {
	width:677px;
	min-height:340px;
	height:100%;
	margin:0;
	padding:5px 30px 0px 60px;
	border-right:1px dotted #999;
}



#maintext_details {
	width:498px;
	min-height:340px;
	height:100%;
	margin:0;
	padding:5px 30px 0px 60px;
	border-right:1px dotted #999;
	font-size:11px;
	color:#333;
}


table.impressum {
	width:100%;
}


table.impressum td{
	border:0;
	border-spacing:0;
	margin:0;
	padding:2px;
	color:#333;
	vertical-align:top;
	/* font-family:arial,vedana,helvetica, sans-serif; */
	line-height:160%;
	/*hyphens:auto;*/
}

table.impressum tr td:first-child{
	padding-right:1em;
	color:#09f;
	width:31%;
	
}

table.impressum a{

	color:#666;
	font-weight:normal;
	text-decoration:none;
	
}


 
 #subkund {
	 padding:0px 0px 10px 0px;
 }
 
 
 #subkund a:link, #subkund a:visited {
	 padding:0px 50px 2px 0px;
	 color:#999;
	 font-size:11px;
 }
 
 #subkund a:hover, #subkund a:active, #subkund a.active, #subkund a.active:visited, #subkund a.active:active {
	 padding:0px 50px 2px 0px;
	 background-image:url(../img/kasterl_gruenkl.gif);
	 background-repeat:no-repeat;
	 background-position:168px center;
	 color:#393;
	 font-size:11px;
 }
 
 
 
#adress {
	 
	 padding:80px 35px 0px 0px;
	 vertical-align:bottom;
	 font-size:10px;
 }
 
#adress p{
	 text-align:center;
 }
 





table.uebersicht_wide {
	font-size:11px;

	border-spacing:0;
	border-collapse:collapse;
	color:#333;
	container-name: tops;
	container-type: inline-size;
	display:block;
	width:100%;
	border:0;
}


table.uebersicht_wide tr td:last-child, table.uebersicht_wide tr th:last-child{
	display:none;
}


table.uebersicht td {
	border:1px solid #666;
	border-spacing:0;
	border-collapse:collapse;
	padding:2px 6px 2px 6px;
	color:#333;
}

table.uebersicht td a{
	font-weight:bold;
	color:#333;
	text-decoration:underline;
}

table.uebersicht th {
	font-weight:normal;
	border-spacing:0;
	border-collapse:collapse;
	vertical-align:top;
	padding:2px;
	
}


table.uebersicht tr.vergeben td a{
    font-weight:normal;
	color:#999;
}


table.uebersicht_wide {
	--td-width: calc((90vw - 22em) / 15);
	font-size:12px;
	border-spacing:0;
	border-collapse:collapse;
	color:#333;
	width:100%;
	margin-top:10px;
	
}

table.uebersicht_wide tr {
	height:2em;
}



table.uebersicht_wide td {
	border:1px solid #666;
	border-spacing:0;
	border-collapse:collapse;
	padding:2px 6px 2px 6px;
	color:#333;
	text-align:center;
}

table.uebersicht_wide td.top_name {
	text-align:left;
}


table.uebersicht_wide td a{
	font-weight:bold;
	color:#333;
	text-decoration:underline;
}

table.uebersicht_wide th {
	font-weight:normal;
	border-spacing:0;
	border-collapse:collapse;
	vertical-align:top;
	padding:2px;
	border:1px solid #666;
	
}

table.uebersicht_wide th, table.uebersicht_wide td {
	min-width:5%;
	width:var(--td-width);
}

table.uebersicht_wide th.top_name {
	text-align:left;
	min-width:25%;
	width:calc(5 * var(--td-width));
}

@container tops (width<600px) {
	td:nth-of-type(3), th:nth-of-type(3)  {
		display:none;
	}
	
	table.uebersicht_wide th, table.uebersicht_wide td {
	--td-width: calc((95vw - 70px) / 15);	
	width:calc(1.66 * var(--td-width));
    }
	
}


@container tops (width<480px) {
	td:nth-of-type(5), th:nth-of-type(5),
	td:nth-of-type(6), th:nth-of-type(6),
	td:nth-of-type(7), th:nth-of-type(7),
	td:nth-of-type(8), th:nth-of-type(8){
		display:none;
	}
	
	table.uebersicht_wide th, table.uebersicht_wide td {
		--td-width: calc((95vw - 70px) / 15);
	width:calc(3 * var(--td-width));
    }
	
}


table.uebersicht_wide th.empty {
	font-weight:normal;
	border:0;
	border-spacing:0;
	border-collapse:collapse;
	vertical-align:top;
	padding:2px 4px;
	
}

table.uebersicht_wide tr.vergeben td {
	/* text-decoration:line-through; */
	background:#dedede;
	color:#999;
}

table.uebersicht_wide tr td.etage {
	/* text-decoration:line-through; */
	background:#fefefe;
	color:#333;
}

table.uebersicht_wide tr.vergeben td a{
    font-weight:normal;
	color:#999;
}


.topnr {
	float:right;
	margin:88px 20px 20px 0px;
}

.topnr h1{
	font-size:10px;
	text-transform:none;
	line-height:95%;
	
}

#grundriss  {
    text-align:left;
}

#grundriss h3 {

	padding-left:65px;
}

#grundriss a {
    text-decoration:underline;
	font-weight:normal;
	padding:0px 20px 0px 65px;
}

#grundriss a.back{
    text-decoration:underline;
	font-weight:bold;
	padding:0px 35px 0px 0px;
	color:#666;
	float:right;
}

#grundriss img {
    
	padding:10px 10px 0px 15px;
}

.top_number{
	background-color:#fc0;
	font-weight:bold;
}

td.top_name{
	background-color:#ff9;
	font-weight:bold;
	/*Üfont-style:italic;*/

}

.top_small td{
	background-color:var(--bgcolor-oneortwo);
}

.top_office td{
	background-color:var(--bgcolor-office);
}


.top_family td{
	background-color:var(--bgcolor-family);
}

.top_plan{
	background-color:#0ff;
}

.top_details{
	background-color:#09f;
}
table.details_kurz {
	margin:0px 0px 15px 0px;
	
}

table.details_kurz td{
	padding:1px 18px 1px 0px;
	color:#333;
	vertical-align:bottom;
	line-height:130%;
}

.zur_uebers {
	float:right;

	font-size:11px;
}

.phppgmainbox {
	text-align:center;
	width:100%;
	padding-bottom:10px;
	
}

.phppgimagebox {
	margin-bottom:20px;
}

.phppgimagetag {
	padding:1px;
}

.imgtopframe {
	width:100%;
	height:13px;
}
.phppgimgframe {
	padding:0;
	margin:0;
	border:0;
	width:100%;
	
}


.imgcornerleft {
	float:left;
}

.imgcornerright {
	float:right;
}


.phppggifbox {
	margin-left:20px;
}

.none {
}


.media--right figure{
	margin:0.5em 0 1em 2em;
}

.media--left figure{
	margin:0.5em 2em 1em 0;
}



figure + .rte {
	margin-top:1em;
}

.content-downloads ul {
  display: flex;
  flex-flow: row wrap;
  container-name: downloads;
  container-type:inline-size;
  padding:0.5em;
}
.swiper-button-next, .swiper-button-prev, .swiper-pagination {
	display:none
}

@container downloads (min-width: 430px) {
	.download-element {
		flex-basis: calc(50% - 1em);
	padding-right:1em;
	padding-bottom:1em;
}
}




@container downloads (max-width: 429px) {
	.download-element {
		flex-basis: 100%;
}
}

.vienneva {
	font-size:0.85em;
	color:#92a3ae;
	display:inline-block;
	margin-top:1em;
	background-color:var(--bgcolor-blue);
	padding:0 0.2em;
}
.vienneva a{
	color:#92a3ae;
}


.cboxElement picture::after {
	display:block;
	position:absolute;
	bottom:3em;
	right:calc(50% - 1em);
	Background-color:#fff;
	mask-image: url("../img/lupe-plus.svg");
	mask-size: 32px 32px;
    mask-repeat: no-repeat; 
	mask-position: top left;
	width:2em;
	height:2em;
	content:" ";
}


.roadmap.roadmap--orientation-vertical.roadmap--initialized {
  margin: 35px auto;
  position: relative;
}

.roadmap.roadmap--orientation-vertical.roadmap--initialized .roadmap__events__event .event {
  top: -0.5em;
}

.roadmap.roadmap--orientation-vertical, .roadmap.roadmap--orientation-vertical .roadmap__event, .roadmap.roadmap--orientation-vertical .roadmap__events {
	width:100%;
	max-width:unset;
}


.roadmap.roadmap--orientation-vertical.roadmap--initialized .roadmap__events .roadmap__events__event:nth-child(2n+1) .event__content,.roadmap.roadmap--orientation-vertical.roadmap--initialized .roadmap__events__event:nth-child(2) .event__date  {
  padding-left: 35px;
}


.roadmap.roadmap--orientation-vertical.roadmap--initialized .roadmap__events .roadmap__events__event:nth-child(2n) .event__content, .roadmap.roadmap--orientation-vertical.roadmap--initialized .roadmap__events__event:nth-child(2n+1) .event__date {
  padding-right: 35px;
}

.roadmap.roadmap--orientation-vertical.roadmap--initialized .roadmap__events__event:nth-child(2n+1) .event__date, .roadmap.roadmap--orientation-vertical.roadmap--initialized .roadmap__events__event:nth-child(2n) .event__date {
  font-size: 1.2em;
}


.roadmap.roadmap--orientation-vertical.roadmap--initialized .roadmap__events .roadmap__events__event::after {
	border-radius:0;
	border:1px solid var(--color-green);
	background-color:#fefefe;
    left: calc(50% - 2px);
    z-index:99;
    width:22px !important;
    height:22px !important;
}


.roadmap.roadmap--orientation-vertical.roadmap--initialized .roadmap__events::after {
  width: 2px;
  background-color:var(--color-green);
}


.roadmap .roadmap__events__event:nth-child(2n+1) p{
	text-align: center;
}


.roadmap .roadmap__events__event:nth-child(2n) p{
	text-align: center;
}


.roadmap .image img {
	border:1px solid #ccc;
}

figcaption {
	font-size:0.9em;
	font-style: italic;
	text-align: center;
}

.roadmap figcaption {
	font-size:0.9em;
	font-style: italic;
	text-align: center;
	border-bottom:1px solid #ccc;
	margin-bottom: 1em;
}

.roadmap  picture {
  display: inline-block;
  position: relative;
}

.roadmap  picture::after {
	display:block;
	position:absolute;
	bottom:1.5em;
	right:calc(50% - 0.5em);
	Background-color:#fff;
	mask-image: url("../img/lupe-plus.svg");
	mask-size: 16px 16px;
    mask-repeat: no-repeat; 
	mask-position: top left;
	width:1em;
	height:1em;
	content:" ";
}

.roadmap .cboxElement {
  display: block;
  text-align: center;
}

.ce_timelineSliderStart {
  background-image: url("../img/fassade_sw_cropped07.svg");
  background-repeat: repeat-y;
  background-size: 300%;
  background-position: center;
}

#cboxContent #cboxTitle {
  position: absolute;
  top: unset;
  bottom:1em;
  margin:0 1em;
  left: 0;
  color: #fff;
  background-color:#333333aa;
  padding:0.3em;
}

.handorgel__header {
  display: block;
  margin: 0;
  font-size: 1em;
  line-height: 1;
  padding: 0;
  border-bottom:none;
}
.handorgel__header__button {
	padding:0.5em;
	color:var(--color-green);
}

.datenschutz ol{
	list-style-type: lower-latin;
	margin-top:0;
}

.smalltext {
	font-size:0.8em;
}

h3.smalltext {
	font-size:0.9em;
	text-transform: none;
}

.hyphens {
	hyphenate:auto;
}