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

/*Fragen, Vorläufiges, Arbeitsversion-------------------------*/
.work{color:#F60; font-style:italic;}

* {
margin: 0;	padding: 0;
border: 0 none; 
vertical-align: baseline;
}



/* abel-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Abel';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/abel-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

html {
height: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%; 
}

body {
min-height: 100%;
font-size: 100.01%;
/*overflow-y: scroll; */
}

/* Mixins , behebt BUGs in den Browsern
=================================================== */
/*clearfix bewirkt bei floatenden Elementen in einer Box, dass diese korrekt in der Box stehen*/
.clearfix {*zoom: 1; }/*100%Darstellung f�r IE*/
.clearfix:before {display: table; content: ""; }
.clearfix:after {display: table; content: ""; clear: both; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
  position: static;
  clip: auto;
  height: auto; width: auto; margin: 0;
  overflow: visible; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
  }
  *:first-child + html .clearfix {zoom: 1; }
  *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }

/* IE7 */
/* #Basic Styles
================================================== */
/* apply a natural box layout model to all elements */
html {
  background:#fff;
  margin: 0; padding: 0;
  height: 100%;
  font-size: 100.01%;
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: #f3f5f6;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {

  background-color:#fff;
  margin: 0; padding: 0;
  font-family:"Abel","HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 100.01%; color: #666; line-height:1.7em;
  -webkit-font-smoothing: antialiased;
   /*Fix for webkit rendering*/ 
  -webkit-text-size-adjust: 100%; 
   }
   
  /* #Typography
================================================== */
h1, h2, h3, h4, h5, h6 {margin: 0; font-weight:normal; line-height:normal; text-rendering: optimizelegibility;/*optimiert die Lesbarkeit, wird aber nur von Gecko-Engines und Web-Kit Browsern unterstützt*/ }


h1{font-size: 42px; color:#999; padding-left:0px; text-align:center; margin-bottom:25px; margin-top:50px; letter-spacing:0.35em; }
.datenschutz h1{margin-top:0px; text-align:left; font-size: 32px;}
h2{font-size: 26px; color:#999;}
h3{font-size: 20px; color:#999; padding-bottom:10px; }
h4{font-size: 20px; color:#999; padding-bottom:10px; }
h5{font-size: 16px; color:#999;padding:10px 0 10px 0; }
h6{font-size: 15px;}

ul, ol {margin:0; padding:0; list-style:none;}

li{font-size:15px; list-style:none; line-height:1.7em;}

p{font-size: 15px; line-height: 1.7em; padding-bottom:10px; }

b, strong { font-weight: 600; }

em {font-style: italic; }

br{margin:0; padding:0;}


/*allgem. Klassen-----------------------------*/
.antifloat{clear:both;}
.bordernone{border:none;}
.nobr{white-space: nowrap;}/*kein Umbruch, indexseite*/

.small {font-size: 16px; font-weight:normal; }
.normal{font-weight:normal;}  
.space{letter-spacing:0.125em;}
.red{color:#930;}
.orange{color:c70;}
.grey{color:#666; font-size: 15px;}
.absatz{padding-bottom:15px;}
/*-----------------------------*/



/*Grafiken----------------------------------*/
img {
 display:block;
 width: 100%; /*auf kleineren Displays wird das Bild, wenn es zu gro� ist, verkleinert*/
 height: auto;
 border: 0;
 -ms-interpolation-mode: bicubic;/*Art der Berechnung beim Skalieren f�r IE7*/ 
}



/*NAVIGATION allgemein----------------------------------------------------------------------*/
a {display:block; color:#666; text-decoration:none; }
a:hover, a:focus, a:active {text-decoration:none; opacity:0.7;}

a.textlink{display:inline; text-decoration:underline; color:#c70;}
a.textlink:hover{opacity:0.7;}


.adresse{padding:0; margin:0;}
.adresse a{display:inline; color:#666;}

/*für die E-Mail Adressen um @ zu verstecken*/
.adresse noscript span {display:none;}


/*Telefonnummern PC Smartphone*/
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:focus,
a[href^="tel"]:hover  {
	display:inline; text-decoration: none; 
}

/*--------------------------------------------------------------------------------------*/



#wrapper{width:100%; height:100%; }

/*nur für Mobil, auf dem PC nicht sichtbar*/
.menu-btn{display:none;}/*Riffellinien für Menü bei kleinem Display*/
.name-mobil, .menu-btn{display:none;}
.nav-vert .mobil, .mobil{display:none;}/*blendet Home-btn, Impressum-btn und Datenschutz-btn im senkrechten Menü für PC aus*/


/*Header---------------------*/

.header .adresse{background-color:#eaeaea; height:40px;}
.header .adresse p{text-align:center; padding-top:5px; width:100%; background-color:#eaeaea;}

/*Homebutton */
/*.nav-header ul li{padding:145px 0 0 1043px;  color:#930;}
.nav-header ul li a{color:#666;}
.nav-header ul li a:hover{color:#c30; opacity:0.7;}
.nav-header ul li.header-active{ color:#930; font-weight:bold; }/*Aktiver Menüpunkt, */

/*-------------------------------------------------------------*/

/*Container für linke und rechte Spalte - Thumbs haben einen eigenen container*/
.container{  margin: 0 auto; margin-top:0px;  width:950px; height:100%; }
.container-pict {width:535px; height:100%; }
.bibliografie img{ margin: 0 auto; width:250px;}/*Bild Buch sitzt noch nicht gut*/
.bibliografie p{margin: 0 auto; width:250px; ; padding-top:10px; text-align:center;}
.bibliografie h2{text-align:center; width:100%;  padding-top:10px; }
/*.kontakt {margin:0 auto; width:535px; height:100%; background:yellow;}*/

/*HAUPTSPALTE,!css für Slideshow: gesondertes css!*/
.main-column{float:left; margin:0 auto;  margin-top:0; margin-left:100px; padding-bottom:50px; width:535px; height:100%; }
.kontakt{margin:0 auto; width:450px; height:100%; padding-left:110px;}
.kontakt img{ width:250px; height:100%;}
.einzug{padding:20px 0 0px 0px;}
.kleiner-einzug{padding-left:10px;}

/*RECHTE SPALTE----------------------*/
.right-column{float:left; padding-top:170px; padding-left:0; width:150px; height:100px; }
.right-column-kontakt{padding-top:80px; }
.right-column-datenschutz{padding-top:0px; }






/*Vertikales rechtes Menü----------------------------------*/
.nav-vert{float:left; padding:40px 0 0 20px; }
/*.nav-vert-bibliografie{ margin:60px 0 0 -60px;margin:70px 0 0 -200px;}
.nav-vert-datenschutz{margin:50px 0 0 60px;}*/
.nav-vert-kontakt{margin:0px 0 0 -30px;}
.nav-vert-impressum{margin:-50px 0 0 0px;}
.nav-vert ul li{margin-bottom:0px;}


.nav-vert ul li a:hover{color:#c70; opacity:0.7;}
.nav-vert ul li.active {color:#c70; font-weight:bold;}
/*---------------------------------------*/



/*MENÜ LAW------------------------------------------*/

.startseite-law{padding-top:0px;}/*Da es auf der Startseite keinen Text geben soll, soll hier das Law-Menü tiefer sein*/

.nav-law{position:fixed; width:100%; bottom:0px;}

.nav-law p{  font-size:13px; width:100%; padding:5px 0 5px 0; color:#666; text-align:center;background:#eaeaea;}
/*.header .adresse p{text-align:center; padding-top:5px; width:100%; background-color:#eaeaea;}*/
.nav-law a{display:inline;}
.nav-law p a:hover{opacity:0.7;}



/*--------------------------------------------------------*/



/*Inhalt------------------------------------------------------------------------------*/

.name{color:#999; font-size:20px; font-weight:bold;}/*Name im Text auf der Startseite*/

/* Tabellarische Auflistung (Vita, Ausstellungen, Bibliografie ------------------------------*/
ul.zeile{margin-bottom:10px; }

ul.zeile li.links{float:left; width:50px;}
.vita ul.zeile li.links{width:80px;}

ul.zeile li.rechts{margin:0 0 0 50px; width:auto; }
.vita ul.zeile li.rechts{margin:0 0 0 80px; }

/*--------------------------------------------------------*/
ul.links {margin-top:20px;}/*Seite Links*/
ul.links li{margin-bottom:20px;}/*Seite Links*/
.kontakt ul, .impressum ul{margin-bottom:20px;}/*Seite Kontakt*/
.kontakt li{font-weight:bold;}

	


/* Smartphones*/
@media screen and (min-width: 280px) and (max-width: 819px){

h1{font-size: 30px; color:#999; padding-left:0px; text-align:center; margin-bottom:25px; margin-top:50px; letter-spacing:0em; }

.mobil{display:none;}
	
.right-column h2{display:none;}/*Name Ingrid Thiel über dem vertikalen Menü auf dem Smartphone unsichtbar*/

#wrapper{width:100%; height:100%;padding:10px;}



/*VERTIKALES MENÜ-----------------------------------------------------------*/
/*Die Menüs sind mit diesem Button ein- und ausblendbar*/
.menu-btn {display:block; float:right; width:100%; height:auto;  padding:10px 0 0 0;  background:#fff;  z-index:6; }
.menu-btn a{background-image:url(picts/pict_menue.png); background-position: right; background-repeat:no-repeat;}

/*Menü wird zum Klappmenü*/
.nav-vert{display:none; position:absolute; width:100%; top:120px; left:0; margin:40px auto 0 0; padding:50px 0 20px 0; background-color:#fff;  z-index:6; }
.nav-vert ul li{width:100%;  height:auto; margin:0; padding:10px 0 10px 40px; text-align:left;  background-color:#fff;}

/*.lastbtn{padding-bottom:30px !important;}*//*Mehr Platz unter letzten Button Menü Skulpturen*/

.nav-vert .line{border-top:1px solid #999;}/*Unterteilungsstrich des Menüs*/

.nav-vert .mobil{display:block;}/*blendet Home-btn im Klappmenü ein*/

.nav-vert-kontakt{margin:40px 0 0 0px; padding:50px 0 20px 0;}
	
.absatz{padding-bottom:0px;}
	
.menu-btn a.open{display:block; }
.menu-btn a.close{display:none;}

#menu-open:target .menu-btn a.open{display:none;  }
#menu-open:target .menu-btn a.close{display:block; background-image:url(picts/menu_pfeil.png); background-position:right; background-repeat:no-repeat;}	
#menu-open:target .nav-vert{display:block;}

/*-------------------------------------------------------------------------------------------- */

.container{margin:0 auto; width:100%; height:100%; background-color:#fff; }
.container-bibliografie{width:100%; height:100%; }
.bibliografie img{ margin: 0 auto; width:100%;}
.bibliografie p, .bibliografie h2{margin: 0 auto; width:100%;  padding-top:10px; text-align:center;}	

.einzug{padding:20px 0 10px 10px;}
.kleiner-einzug{padding-left:10px;}
	
.container-pict{width:100%; height:100%;}/*soll sich an Bildschirmgröße anpassen*/

	
.kontakt{margin:0 auto; width:100%; height:100%; padding-left:0px;}
.kontakt img{padding-left:0px; margin:0 auto; width:100%; height:100%;}
	
/*Spalten*/
.main-column{ width:100%;margin:0; padding:0 0 50px 0;}
.main-column-datenschutz{ max-width:100%;}	
	
.startseite-law{padding-top:10px;}/*Posititon des Law-Menüs, da es auf der Startseite keinen Text geben soll*/
.nav-law .pc{display:none;}
/*--------------------------------------------------------*/

}

/* Tablet Portrait+Landscape*/
@media screen and (min-width: 768px) and (max-width: 1024px){
	/*Liste mittig*/
	.vita ul {
	display: table;
	margin: 0 auto; 
	}
	
}

/* Tablet Air*/
@media screen and (min-width: 820px) and (max-width: 1023px){
	/*Homebutton */	
	.nav-header ul li{padding:145px 0 0 550px;}
	
	.container{margin:0 auto; width:100%; height:100%; background-color:#fff; }

	/*Name rechte Spalte über dem Menü*/
	.right-column h2{margin:-20px 0 0 50px;}
	span.untertitel{font-size:16px; padding-left:130px;}


	.bibliografie img{ margin: 0 auto; width:50%;}/*Bild Buch sitzt noch nicht gut*/
	.bibliografie p{margin: 0 auto; width:250px; ; padding-top:10px; text-align:center;}

	/*Vertikales rechtes Menü----------------------------------*/
	.nav-vert{ margin:20px 0 0px 20px; }
	/*.nav-vert .sub{margin-left:0px;}*/
	
	.nav-law{position:fixed; width:100%; bottom:0px;}
	.nav-law p{  font-size:13px; width:100%; padding:5px 0 5px 0; color:#666; text-align:center;background:#eaeaea;}

}