@charset "UTF-8";
/* CSS Document */


html{
height:100%;
}

* { 
padding: 0;
margin: 0;
}

body {
background-color:#787878;
font-size:0.9em;
height:100%;
font-family: 'Source Sans Pro', sans-serif; /*light 300 - reg 400 - bd 700*/
color:#FFF;
}

.clearfix:after {
content: ".";
display: block;
clear: both;
font-size: 0;
height: 0;
visibility: hidden;
}

.clearLeft {
	clear:left;
}

.floatLeft {
	float:left;
}


#wrapper{
position: relative;
/*background-color:#0FC;*/
/**/height:100%;
min-height:500px;
margin:0 auto;
width:1454px;
}

#content{
}




h2,h3,h4,p{
	line-height:1.6em;
}



h1{
font-size:1.6em;
font-weight:700;
padding-bottom:20px;
}

h2{
font-size:1.6em;
}

/* in Veranstaltungen: */
.reRightFlex > h2 {
    line-height: 1.2;
    margin: 15px 0;
}

h3{
font-size:1.2em;
font-weight:700;
margin-bottom:10px;
}

h4{
font-weight:700;
margin-bottom: 10px;
}


.mager {
	font-weight:300;
}

p{
	padding-bottom:12px;
}

p a,
h3 a,
h4 a {
	text-decoration:none;
	color:#FFF;
	border-bottom: 1px dotted #fff;
}

p a:hover,
h3 a:hover,
h4 a:hover {
	color:#CCC;
}

.noMargTop {
margin-top: 0px !important;
}

.hervorhebungP {
	font-weight:700;
	letter-spacing:0.02em;
	text-transform:uppercase;
}

strong {
font-weight: 600;
}

.bold {
	font-weight:700;
}

.marginTop {
margin-top: 20px;
}

.marginBottom {
margin-bottom: 10px !important;
}

.alarm {
color: #FF393C;
font-weight: 900;
text-transform:uppercase;
letter-spacing:0.2em;
}

.durchgestrichen {
text-decoration:line-through;
}

#header{ /* späterer Content möglich. Z.Zt. nur Abstandselement */
	height:6px;
	display:block;
	margin:12px 0 12px 209px;
	/*background-color:#F90;*/
}

.contHeader{
	display:block;
	width:100%;
}


#leftCol{
	/*background-color:#F3F;*/
	/**/float:left;
	/*height:100%;*/ /*mit height: Problem mit Footer . ohne: mit Details-Seite*/
	width:209px;
}


#details #leftCol{
	height:100%;/**/ /*mit height: Problem mit Footer . ohne: mit Details-Seite*/
}

.logo{
	padding-left:15px;
}

.borderAbsatz {
	border-bottom:1px solid;
	display:block;
}

.borderTop {
	border-top: solid 2px #CCC;
	padding-top: 6px;
}

/*  ========================= Full Screen Menu ========================= */
/* komplettes Full Screen Menu wird vor Mobiles versteckt */

#navMenu{
	font-size:1.2em;
	font-weight:700;
	padding:25px 15px 15px 15px;
}

/* =========== 1st level =========== */
#navMenu ul li {
	padding-top:10px;
}

#navMenu ul li a{
	text-decoration:none;
	color:#CCC;
}

#navMenu ul li a:hover{
	color:#FFF;
}

/* ==== 2nd level - versteckt - per body-id einblenden ==== */
#navMenu ul ul{
	margin-left:10px;/**/
	font-weight:400;
	font-size:0.85em;
	display:none;/**/
}

#navMenu ul ul li{
	padding-top:5px;
}

.navMenuLight {
font-weight: 300;
}

/* passendes verstecktes Submenu per body-id einblenden:*/
#bueros #navSubBuero,
#bueroK #navSubBuero,
#bueroL #navSubBuero,
#bueroDD #navSubBuero,
#bueroPar #navSubBuero,
#bueroLima #navSubBuero,

#philosophie #navSubPhilo,
#philHaut #navSubPhilo,
#philSinne #navSubPhilo,
#philLeben #navSubPhilo,

#werkschau #navSubWerk,
#wohnbauten #navSubWerk,
#kulturbauten #navSubWerk,
#gewerbe #navSubWerk,
#kirchen #navSubWerk,
#aufbauten #navSubWerk,
#bildforsch #navSubWerk,
#strassewege #navSubWerk,
#workinprogress #navSubWerk,
#aktuellProj #navSubWerk


{
	display:block; /*not inline*/
}


/*current page indicator:*/
/* Achtung: s.a. passendes verstecktes Submenu per body-id einblenden:*/

#home #navHome a,

#bueros #navBueros a,
#bueroK #navBueroK a,
#bueroL #navBueroL a,
#bueroDD #navBueroDD a,
#bueroPar #navBueroPar a,
#bueroLima #navBueroLima a,

#philosophie #navPhilosophie a,
#philHaut #navPhilHaut a,
#philSinne #navPhilSinne a,
#philLeben #navPhilLeben a,

#werkschau #navWerkschau a,
#wohnbauten #navWohnbauten a,
#kulturbauten #navKulturbauten a,
#gewerbe #navGewerbe a,
#kirchen #navKirchen a,
#aufbauten #navAufbauten a,
#aktuellProj #navAktuellProj a,
#bildforsch #navBildforsch a,
#sportbauten #navSportbauten a,
#strassewege #navStrassewege a,
#workinprogress #navWorkinProgress a,

#philHaut #navPhilHaut a,
#philSinne #navPhilSinne a,
#philLeben #navPhilLeben a,
#wohnbauten #navWohnbauten a,
#kulturbauten #navKulturbauten a,
#gewerbe #navGewerbe a,
#kirchen #navKirchen a,
#aufbauten #navAufbauten a,
#aktuellProj #navAktuellProj a,
#details #navDetails a,
#jobs #navJobs a,

#veranstaltungen #navVeranstaltungen a,
#blog #navBlog a,

#impress #navImpress a
{color:#FFF;}


/*  ========================= Mobile Menu ========================= */

/* komplettes mobile Menu wird für FullSize Screens versteckt */
#mobileMenu{
	display:none;
	font-size:1.9em;
}

/* Menubuttons mit Accordion */
.trigger, .triggerMenu{
	font-size:1.9em;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:0 1px 1px #fff inset;
	-webkit-box-shadow:0 1px 1px #fff inset;
	box-shadow:0 1px 1px #fff inset;
	/* für -moz-linear-gradient muss 90 Grad 90deg angegeben werden */
	background:url(../images/mobile/PlusIcon_gr.png) no-repeat 98% center #ddd;
	border:1px solid #7f7f7f;
	color:#666;
	cursor:pointer;
	/*margin-bottom:5px;*/
	padding:15px;
	text-shadow:0 1px 0 #fff;	/*width:95%;*/
}

.triggerMenu{
	font-size:2.9em;
	/*font-weight:bold;*/
}

/* SubMenubuttons ohne Accordion */
.linkBox{ /* Kopie von .trigger bis auf BG-Bild */
font-size:1.9em;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:0 1px 1px #fff inset;
	-webkit-box-shadow:0 1px 1px #fff inset;
	box-shadow:0 1px 1px #fff inset;
	background:url(../images/mobile/IconCursor_gr.png) no-repeat 98% center #ddd;
	border:1px solid #7f7f7f;
	color:#666;
	cursor:pointer;
	/*margin-bottom:5px;*/
	padding:15px;
	text-shadow:0 1px 0 #fff;
	/*width:95%;*/
}


 /* geöffente Menupunkte */
.linkBox a{
	display:block; /*ganzes div als Link*/
	text-decoration: none;
	color:#000;
	padding-left: 50px;/**/
}



 /* bereits offene Menupunkte */
.linkOffen{ /* Kopie von .linkBox bis auf BG-Farbe, color, text-decoration */
font-size:1.9em;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:0 1px 1px #fff inset;
	-webkit-box-shadow:0 1px 1px #fff inset;
	box-shadow:0 1px 1px #fff inset;
	background:url(../images/mobile/IconCursor_gr.png) no-repeat 98% center #ddd;
	border:1px solid #7f7f7f;
	cursor:pointer;
	/*margin-bottom:5px;*/
	padding:15px;
	text-shadow:0 1px 0 #fff;	/*width:95%;*/
}

.linkOffen a{ /* muss aus .linkOffen ausgelagert werden, Werte sonst nicht aktivierbar  */
display:block; /*ganzes div als Link*/
color:#666;
text-decoration: none;
}


/* aktiver Menubutton mit Accordion */
.trigger_active, .trigger_activeMenu {
	color:#666;
	background:url(../images/mobile/MinusIcon_gr.png) no-repeat 98% center #ddd;
}

/* Bereich für diversen Inhalt, der aufslidet */
.toggle_container {
/*	padding:5px 10px; kein left-/right-padding, sonst sind die Boxen nicht bündig */
}


/*  ========================= END mobile Menubereich ========================= */


#rightCol{
	/*background-color:#F06;*/
	margin-left:209px;
}


/* START block iframes */
/* Script that blocks a YouTube iFrame and overlays it with a consent button */

#video-wrapper {
    background-repeat: no-repeat;
    background-size: cover;
   /* background-color: #000;*/
}
/* preview img : individual class for each video */
.overlayBG-01 {
    background-image: url("../images/Video-Screenshot-Shift.jpg");
}
.overlayBG-02 {
    background-image: url("../images/Video-Screenshot-Anne-Fink-Winfried-Bode.jpg");
}


#video-gdpr-overlay * {
  position: unset;
  top: unset;
  left: unset;
  width: auto;
  height: auto;
  font-weight: 900;
} 
#video-gdpr-overlay {
/*position: unset;*//* relative to acheive z-index */
  width: 100%;
  background: rgba(255,255,255, 0.8);
  color: #000;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: all;
}

#video-gdpr-overlay .inner {
  padding: 10px !important;
}

/* block-map-iframe */
/* Script that blocks a Maps iFrame and overlays it with a consent button*/
/* https://github.com/mountbatt/block-map-iframe */
/* Author: Tobias Battenberg */


#map-wrapper {
    background-image: url("../Bilder/allgemein/map.svg");
    background-repeat: no-repeat;
    background-size: cover;
}
#map-gdpr-overlay * {
  position: unset;
  top: unset;
  left: unset;
  width: auto;
  height: auto;
} 
#map-gdpr-overlay {
  width: 100%;
  background: rgba(255,255,255, 0.5);
  color: #000;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: all;
}

#map-gdpr-overlay .inner {
  padding: 10px !important;
}
/* ratios */
.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: 56.25%;
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  padding-top: 100%;
}

.ratio-4x3 {
  padding-top: 75%;
}

.ratio-16x9 {
  padding-top: 56.25%;
}

.ratio-21x9 {
  padding-top: 42.8571428571%;
}

/* Button like Bootstrap */
.btn {
  padding: 0.8rem;
  line-height: 1.5rem;
  color: #fff;
  background-color: #be1936;
  border-radius: 0.3rem;
  text-decoration: none;
  cursor: pointer;
  font-weight: 400;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn:hover {
  background-color: #fff;
  color: #000;
}
/* END block iframes */


/*1-spltg. Content in rechter Spalte für Youtube-Videos */
/* nach https://highlife-media.de/magazine/content-creation/iframe-responsive-einbinden-so-passen-sich-deine-youtube-videos-an/ */
.video-container { 
Position: relative; 
padding-bottom: 56.24%;  /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
height: 0; 
overflow: hidden; 
} 
 
.video-container iframe, 
.video-container embed, 
.video-container object { 
position: absolute; 
top: 0; 
left:0; 
width:100%; 
height:100%; 
}

/*2-spltg. Content in rechter Spalte, zB für impressum*/

.umschliess{} /*falls Blöcke zeilenweise bündig sein sollen*/

.umschliess2 {
	overflow: auto;
	width: 100%;
}

.reLeft, .reRight{
	width:388px;
}

.reLeft {
	float:left;
	
	/*padding-right:40px;*/
}

.reRight{
	margin-left:428px;
}

/* END 2-spltg. Content in rechter Spalte */


/* flexibler 2-spltg. Content in rechter Spalte, zB für Über uns */

.umschliessFlex{}

.reLeftFlex, .reRightFlex{
	width:65%;
}

.reLeftFlex {
	float:left;
}

.reRightFlex{
	margin-left:428px;
}

#veranstaltungen .umschliess,
#blog .umschliess { /* zur Abgrenzung der Veranstaltungen */
	border-top:#CCC 2px solid;
	padding-top:10px;
	margin-top:10px;
}

/*#veranstaltungen .umschliess:last-child { funzt nicht
	border-bottom:1px solid;
}*/

#veranstaltungen h2 {
	font-size:2.2em;
	/*margin-bottom:10px;*/
}

#veranstaltungen h3 {
	/*margin-bottom:10px;*/
}

.umschliess > h3 {
margin-bottom:0;
}

/* END flexibler 2-spltg. Content in rechter Spalte */


/* ============== spezielles Layout für Kacheln im Content re. Spalte: ==============*/
/*Kacheln sortieren sich 3-/2-spaltig von selbst*/

/*Kacheln müssen alle gleiche Höhe haben - je nach Content versch. Höhen vergeben*/
.kachel{
	float:left;
	width:400px;
	margin-right:15px;
}

.kachel350{
	height:350px;
}


/* ============== END spezielles Layout für Kacheln im Content re. Spalte ==============*/

/*.fresco für fresco Lightbox*/
.gallery, .galleryRight
{
	/*width:400px;*/
	/*height:300px;*/
	padding:0 15px 14px 0;
}


/* fuer Bilder und BUs im Body */
.BildContainerMain {
float: left;
margin: 0px 14px 30px 0px;
}

.BildContainerMain2 {
  float: left;
  margin: 6px 14px 4px 0px;
}

.BildContainerMainBU {
font-size: 0.9em;
line-height: 1.4em;
margin: 4px 0;
}

/* BildContainerMainBild hat keine Regel */



/* ============== kann wohl weg: ==============*/
/*http://little-boxes.de/lb1/14.6-methode-1-floats-einschliessen-mit-clear.html*/
/*damit wrapper umschliesst*/
div.gallery br , .galleryRight br{
  width: 0;
  height: 0;
  font-size: 0;
  line-height: 0;
}
.clearing { clear: both; }
/* ============== END kann wohl weg ==============*/


.gallery{
	/**/float:left;
}

.galleryRight{
	/**/float:right;
}


/* ============== spezielles Layout für Galerie Details: ==============*/
/* Container re Spalte wird über media queries eingeblendet  */

#details2col,
#details3col{
	margin-left:209px;
}

/* ============== FullSize: ==============*/

/* formatfüllend */
.fullRespnsv {
width: 100%;
height: auto;
}

/*gesamter Container - wird für SmallSize ausgeblendet:*/
#details3col{
	width:1120px;
}

/*Bilder Hochformat*/
.galleryDetails{
}

/* ============== SmallSize (wie bisher): ==============*/

/*gesamter Container - wird für FullSize ausgeblendet:*/
#details2col{
	display:none;
}

#details2col .gallery{
	padding:0 14px 14px 0;

}

/* ============== END spezielles Layout für Galerie Details ==============*/




#footer{
	font-weight:300;
	/**/font-size:1.4em;
	letter-spacing:0.05em;
	margin:12px 0 12px 209px;	/*background-color:#F90;*/
}


/* ========== Sticky-Up-Button ============ */

.go-top {
	position: fixed;
	bottom: 2em;
	right: 2em;
	text-decoration: none;
	color: white;
	background-color: rgba(0, 0, 0, 0.3);
	font-size:0.8em;
	text-align:center;
	text-transform: uppercase;
	/**/line-height:1.5em;
	padding: 0.8em;
	/**/display: none;
}

.go-top:hover {
	background-color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 1450px)
{

#wrapper{
width:1040px;
}

#details2col{
display:inline;
}

#details3col{
	display:none;
}

.reLeftFlex, .reRightFlex{
	width:50%;
}


/* Smartphones portrait  831px hat Galaxy Tablet */

@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 831px) 
and (orientation : portrait)
{

/*html { -webkit-text-size-adjust: none; }*/


/* manual text-size-adjust */

h1{
font-size:4.6em;
}

h2{
font-size:3.6em;
}

h3{
font-size:2.8em;
}

h4{
font-size:2.8em;
}

p{
font-size:2em;
}

.BildContainerMainBU{
font-size:1.8em;
}

.bold {
	font-weight:700;
	text-transform:uppercase;
}

/* END manual text-size-adjust */


#wrapper{
width:90%;
/*padding-left:15px;*/
margin-right:25px;
}

#header{
	margin:12px 0 32px 15px;
	height: auto;
	width:100%;
	font-size:4em;
}

.logo{
	padding:15px 0 45px 0;
	width: 100%;
	/**/height:	auto;
}

#leftCol{
	/*background-color:#F3F;*/
		float:none;

	/* auto Problem mit details */height: auto;	
	width:90%;
	margin-left:15px;
	margin-bottom:22px; /*Abstand zu Bildern*/
}

/* komplettes FullSize Menu wird für Mobile Version versteckt */
#navMenu{
	display:none;
}

/* komplettes mobile Menu wird für Mobile Version sichtbar */
#mobileMenu{
	display:inline;
}


/*2-spltg. Content in rechter Spalte, zB für impressum, über uns*/

.reLeft, .reRight{
	width:100%;
}

.reLeft {
	float:none;
	padding-right:0;
}


.reRight{
	margin-left: 0;
}


#veranstaltungen h2 {
	font-size:4em;
	line-height:1.3em;
	/*margin-bottom:10px;*/
}

.reLeftFlex, .reRightFlex{
	margin-left:0px;
	width:100%;
}	

.kachel{
	/*display: table-cell;*/
	float:none;
	width:100%;
}

.kachel350{
	height:auto;
}


#veranstaltungen .umschliess, #blog .umschliess {
margin-top: 60px;
}


/* Galerie u. Details */
#rightCol,
#details2col{
	margin-left: 15px;
	padding-top:22px;
	width:90%;
}

.gallery, .galleryRight{
	/*padding-left:8px;*/
	padding-top:12px;
	float:none;
	/**/height: auto;
   /* width: 600px;*/
	 /*100% Problem mit details */width: 100%;
}

/* ========= Lighbox (auf iPhone) ========= */
.lb-data .lb-caption {
font-size: 17px;
line-height: 1.2em;
}

/* ========= spezielles Layout für details ========= */

#details #leftCol{
	height: auto;
/*display:block;*/
}

#details .gallery, #details .galleryRight{
	/*padding-left:8px;*/
	padding-top:12px;
	float:none;
	/**/height: auto;
   /* width: 600px;*/
	width: 90%;
}

/* ========= END spezielles Layout für details ========= */


.BildContainerMain {
float:none;
margin: 0;
}

.BildContainerMain img{
	height: auto;
width:100%;
}

.BildContainerMainBU {
	margin: 10px 0px 40px 0px;
}


#footer{
	/**/font-size:1.4em;
	margin:12px 0px 12px 15px;
}

}

/* ========= xx-kann weg ========= */

.BildTextContainer {
border: 1px solid #043AE0;
display: inline-block;
height: 300px;
width: 400px;
padding: 0 14px 0px 0;
}

.BildTextRahmen {
border: 1px solid #F90202;
height: 300px;
width: 400px;

}