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

/*Fragen, Vorläufiges, Arbeitsversion-------------------------*/
.work, .work a{color:red !important; font-style:italic;}


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

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

body{
min-height: 100%;
overflow-y: scroll; 
font-family:Verdana,Arial, Helvetica, sans-serif;
font-size: 100.01%;  /*umgeht IE-Bug beim Skalieren der Schriftgröße */
color:#505050;
background-color:#FFF;

}

/* 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%;  background-color:#CF0;}*/

body {
  background-color:#FFF;
  margin: 0; padding: 0;
 /* font-family:Verdana,Arial, Helvetica, sans-serif;*/
 
 font-family: Lucida Bright, Georgia, serif;
 font-family:Lucida Bright, Georgia, "Times New Roman", Times, serif;
  font-size: 100.01%; color: #555;
  -webkit-font-smoothing: antialiased;
   /*Fix for webkit rendering*/ 
  -webkit-text-size-adjust: 100%; 
 /* background-color:#EBECE1;*/
  background-image:url("picts/bg_body.png"); background-position:top; background-repeat:repeat-y;
   }


/*TYPOGRAFIE------------------------*/

p{font-size: 18px; line-height:1.7em; padding:0 30px 20px 10px;}

/*LISTEN-----------------------------------------------------------------------------*/
ul,ol{font-size: 18px; list-style-type:none; margin:0 0 20px 0px;}
li{margin-bottom:5px; font-size: 1.0em; list-style-type:none; line-height:1.7em;}

/*ÜBERSCHRIFTEN-------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {margin: 0; font-weight:600; line-height:1.7em; text-rendering: optimizelegibility;/*optimiert die Lesbarkeit, wird aber nur von Gecko-Engines und Web-Kit Browsern unterstützt*/ }
h1{font-size: 22px; font-weight:600; margin:0 0 20px -20px;  color:#EA8C00; padding-left:20px; background-image:url("picts/pfeil_orange_weiss.gif"); background-repeat:no-repeat; background-position:0 8px;}
h2{font-size: 22px; padding:0 0 10px 0; color:#EA8C00;}
h2.presse{font-size: 22px; padding:0 0 10px 20px; font-weight:400; margin:0 0 20px -10px;  color:#EA8C00; background-image:url("picts/pfeil_orange_weiss.gif"); background-repeat:no-repeat; background-position:0 8px;}
h3{font-size: 20px; padding:0 0 5px 10px; color:#EA8C00;}
h4{font-size: 18px;  padding:10px 0 5px 40px;}


/*#freunde h1{font-size: 0.9em; padding:12px 0 12px 30px; color:#505050;}*/



/*KLASSEN---------------------------------------------------------*/

/*Auf dem PC: .pc sichtbar, .mobil unsichtbar*/
.mobil{display:none;}
.pc{display:block;}

.teiler{position:relative; clear:both; height:20px;}
.normal{font-weight:normal;}


.smaller{font-size:18px; font-weight:normal;}/*kleinere font-size in großer Schrift*/
.orange{color:#EA8C00;}

b, strong { font-weight: 600; }
em {font-style: italic; }
br{margin:0; padding:0;}

.antifloat{clear:both;}
.bordernone{border:none;}
.nobr{white-space: nowrap;}/*kein Umbruch innerhalb eines Namens, */

.pfeil{margin-left:-10px; padding-left:20px; background-image:url("picts/pfeil_orange_weiss.gif"); background-repeat:no-repeat; background-position:0 9px;}
.pfeil-small{margin-left:0px; padding-left:20px; background-image:url("picts/pfeil_rechts_kleiner.gif"); background-repeat:no-repeat; background-position:0 3px;}
.pfeil-weiss{margin-left:20px; padding-left:20px; background-image:url("picts/pfeil_weiss.gif"); background-repeat:no-repeat; background-position:0 5px;}/*FOOTER*/
.line{margin-left:0px; padding-left:15px; background-image:url("picts/line.gif"); background-repeat:no-repeat; background-position:0 15px;}

#right-column .box h2{margin-left:0px;}

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

/*LINKS-------------------------------*/
a{text-decoration:none; color:#EA8C00;}

a:hover{color:#555;}


.textlink{text-decoration:underline; color:#EA8C00;}
.textlink:hover{color:#505050;}



/*Telefonnummern, im PC nicht anklickbar*/
a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:focus,
a[href^="tel"]:hover  {
	display:inline; white-space:nowrap; text-decoration: underline; font-weight:600; /*color:#666; font-weight:normal;*/  
}

/*E-Mail Adresse*/
a[href^="mailto"]:link,
a[href^="mailto"]:visited,
a[href^="mailto"]:focus,
a[href^="mailto"]:hover  {
	display:inline; white-space:nowrap; text-decoration: underline;  font-weight:600;/*color:#666; font-weight:normal;*/}
	 
	 
	 
img{
	border:none;/*kein blauer Rand um Link-Grafik*/
	display:block;
 max-width: 100%; /*auf kleineren Displays wird das Bild, wenn es zu gro� ist, verkleinert*/
}

#wrapper{
position:relative;
margin:0 auto;
width:1200px;/*Breite der Seite*/
/*background-color:#fff;*/
background-color:#EBECE1;
}


/*Grauer Hintergrund*/
.container{float:left;  width:1200px; border-left:1px solid #fff;
border-right:1px solid #fff;
/*background-image:url("picts/bg-container.png"); background-position:top; background-repeat:repeat-y;}*/
background-color:#EBECE1;

}

/*2-SPALTIGES LAYOUT Startseite und Buchillustration, sonst eine Spalte ---------------------------------------------------*/
/*HAUPTSPALTE, 2-spaltig*/
#main-column{
float:left;
width:800px;
padding:0 auto 50px 30px;
background-color:#EBECE1;
}
/*Hauptspalte, einspaltig*/
.content{margin:0 auto; padding:0 60px 50px 60px; width:100%; background-color:#EBECE1;}
.content2{ margin:0 auto; margin-top:20px; width:66%; padding-bottom:50px; background-color:#EBECE1;}/*Freunde/Kollegen*/
.content2 li.quad{margin-left:20px; padding-left:15px;  background-image:url("picts/quad.gif"); background-position:left 10px; background-repeat:no-repeat;}
.content2 li{margin-left:10px;}

/*RECHTE SPALTE*/
#right-column{float:left; width:350px; margin:0; padding:90px 0px 20px 0px; background-color:#fff; background-color:#EBECE1;}


/*INHALT HAUPTSPALTE*/

/*LOGO HENNING STUDTE - CARTOONS*/
.mittig{margin: 0 auto;  margin-bottom:20px;}
.mittig .pict-head{margin: 0 auto; max-width:400px; padding-top:20px;}

.picts div img{float:left;}

/*NAVIGATION*/
.nav-mobil{display:none;}
.nav-pc{position:relative; margin: 0 auto;  padding-bottom: 0px; font-size:22px; color:#555; font-weight:bold; font-weight:550; text-align:center; line-height:2.3em; letter-spacing:0.1em;}



/*Slideshow auf der Startseite---------------------*/
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 600px;
  position: relative;
  margin: auto; border:1px solid #999;
 
}
/* Slideshow container, 6.8.2018: nur temporär */
.slideshow-container { margin-top:50px;}

.slideshow-container-katalog {
  max-width: 990px;
  position: relative;
  margin: auto; border:1px solid #999;
}
/* Hide the images by default*/ 
.mySlides {
    display: none;
}
.mySlides .slide{
    border-bottom:1px solid #ccc;
	
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 80%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: #666;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0; 
}
.slideshow-container-katalog .prev, .slideshow-container-katalog .next{top: 90%;}
/* Position the "next button" to the right */

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
 color:#fff; background-color: rgba(0,0,0,0.4);
}

/* Caption text */
.text {
  color: #666;
  font-size: 15px;
  padding: 3% 5px 12px 5px;
  position: relative;

  width: 100%; min-height:80px;
  vertical-align:bottom;
  text-align: center;
  line-height:1.7em;
 background:#FFF9DF;}
 
 /*Temporär, Bilduntertitel erscheint über dem Bild 1.2.2019
 .text-oben {
  color: #666;
  font-size: 16px;
  padding: 0 5px 12px 5px;
  position: relative;

  width: 100%; /*min-height:80px;*/
  vertical-align:bottom;
  text-align: center;
  line-height:1.7em;
 background:transparent;}*/
 
 
 

/* Number text (1/3 etc) */
.numbertext {
  color: #666;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px 40px 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}
/*--------------------------------*/

.katalog-startseite{margin-top:30px;}
.katalog-startseite img{float:left; border:1px solid #ccc; margin-right:20px}
.katalog-startseite li.pfeil-small{color:#EA8C00; font-weight:600; font-size:20px; line-height:1.0em; margin-left:90px; padding-top:10px; padding-left:20px; background-image:url("picts/pfeil_rechts_kleiner.gif"); background-repeat:no-repeat; background-position:0 10px;}

/*Katalogseite*/
.katalog .mittig{padding-top:20px;}
.katalog p.pfeil-links{margin-left:0px; padding-left:20px; background-image:url("picts/pfeil_links_kleiner.gif"); background-repeat:no-repeat; background-position:0 8px;}
.katalog h1{ margin-left:-10px; margin-top:20px;}
.katalog .bestellen{ margin-left:10px; margin-top:20px;}
.katalog .bestellen ul{float:left; margin-right:20px;}

/*Grosses Bild*/
.pict-top{ margin:0 auto; max-width:600px; height:100%;   border:1px solid #999;background:#FFF; }



/*Text unter "Über mich*/
.spalte1{float:left; width:50%; margin-right:4%;}

.spalte2{float:right; width:46%;}
.spalte2 p{padding-right:0;}

.pict-narren{ width:auto; min-height:600px; margin-left:-20px; margin-bottom:20px; }
.pict-narren img{margin:0 auto; width:auto; height:600px; border:1px solid #888;}
.pict-narren p{text-align:center; padding:5px 0px 5px 0px;}

.hans-moser{position:relative; clear:both;  margin-left:auto; margin-right:auto; top:50px; max-width:800px; padding-top:30px; padding-bottom:30px; border:2px solid #EA8C00;}
.hans-moser h2{padding-left:15px;}
.hans-moser p{padding-left:30px;}



.footer{position:relative;  margin:0 auto; width:750px; margin-top:60px; margin-bottom:30px;}
.footerbox1{position:relative; float:left;/* margin:0 auto;*/ width:330px; min-height:270px; padding:0; padding-top:5px; background:#EA8C00;}
.footerbox1 li{margin-left:40px; margin-bottom:0;}
.footerbox2{position:relative; float:right;/* margin:0 auto;*/ width:330px; min-height:270px; padding:0; padding-top:5px; padding-bottom:10px; background:#EA8C00;}
.footerbox2 p{margin-left:30px; padding-bottom:0;}

.footer .pfeil{margin-left:0px;}

.footerbox1 h2, .footerbox2 h2, .footer li{  color:#fff;}
.footerbox2 p{color:#fff; line-height:normal;}

.footerbox1 h2, .footerbox2 h2{font-size:18px; font-weight:600; margin-top:15px; margin-bottom:0;}
.footer a{color:#fff; text-decoration:underline;}
.footer a:hover{color:#EBECE1;}



/*Impressum/Datenschutz*/
.law{position:relative; clear:left; left:0px; width:250px; margin-left:auto; margin-right:auto; padding:0; top:50px;  }
.law p{text-align:center; margin:0; padding:10px 0 10px 0; border-top:2px solid #EA8C00;  }
.law p a{color:#888; }

.kontaktdaten-impressum{margin-left:30px;}

/*Seite Vita--------------------------------------*/
/* Profilbild*/
.vita .pict-top{background:#EBECE1; border:none; margin:20px 0 40px 100px; max-width:500px;}
/*Seite Vita: rechte Spalte neben dem Bild*/
.about{margin:170px 0 0 -120px;}
/*-------------------------------------------*/



/*INHALT RIGHT COLUMN*/
#right-column p{padding:0;}



/*Kontaktbox*/
#right-column .box{float:left; width:auto; margin:20px 0px 0 0px; padding:0 10px 0px 0px; /*color:#fff; border:none;background:#EA8C00;*/}
#right-column .box ul{margin-left:0;}
#right-column .box .pfeil{margin-left:-20px;}

#right-column .box a{/*color:#fff;*/ text-decoration:underline;}
#right-column .box a:hover{color:#EBECE1;}




#illustration #main-column{max-width:800px;}
#illustration .right-column{display:none;}


/*Grosses Bild*/
#illustration .pict-top{clear:left; margin:0 auto; max-width:600px; height:auto; border:1px solid #999;  margin-bottom:50px; background:#FFF;}
#illustration .pict-top img{margin:0 auto;}

#illustration #bildunterschrift{clear:left; margin:0 auto; padding:0 30px 0 0; max-width:600px; background-image:none; }
#illustration h1{float:left; width:480px;  padding-right:30px;}

#illustration #forward-back{}
#illustration #forward-back img {float: left;  padding:10px 0px 15px 30px;}/*PFEILE*/

#illustration .nummern-illustration{clear:both; margin:-10px 0 0 0px; max-width:600px;}
#illustration .nummern-illustration li{float:left; font-size:0.9em; padding:0px 10px 5px 0; color:#555;}
#illustration .nummern-illustration li a{color:#EA8C00;}

.highlight{color:#555;}

#illustration #right-column{margin:0 auto; padding:0; max-width:260px;}
#illustration .right-column{ display:none;}

#illustration .buchicons{margin:0 auto; margin-top:140px; padding:0; max-width:260px;}

#illustration .icon{margin:0; }
#illustration .icon img{ margin:0 0 0 20px;}
#illustration .icon p{margin-top:5px; padding:0 0 20px 0; background-image:none; color:#555;}
#illustration .icon a{padding-left:0; background-image:none; text-decoration:underline;}
#illustration .icon .highlight{margin-left:0; padding-left:15px; background-image:url("picts/pfeil_orange_weiss.gif"); background-position:left 4px; background-repeat:no-repeat; }



#illustration .content{ padding:0 60px 50px 50px; width:100%; height:100%;  /*background:#eaeaea;*/}
#illustration .content p{padding:0 80px 0 0px;}
#illustration  .content h2{ margin-bottom:5px;}

/*Text unter Buch*/
#illustration .txt{clear:both;  margin:0 auto; width:auto; margin-bottom:50px;  }
#illustration .txt p{padding:25px 60px 0px 70px;}




#illustration #hinweis{clear:both; padding-bottom:50px;  }
/*#illustration .footer{ position:relative;   margin:0 auto; max-width:970px; margin-top:40px; margin-bottom:30px;}
#illustration .footerbox1{margin-left:0px; width:300px;  min-height:220px;  padding:0; padding-top:15px; background:#EA8C00;}*/

#illustration .law p{margin:0 auto; width:300px;}

/*Impressum/Datenschutz*/
#illustration .law{margin:0 auto; left:-50px; width:1200px; border:none; background:#EBECE1;}
#illustration .law p{text-align:center; margin:0 auto; padding:10px 0 10px 0; border-top:2px solid #EA8C00;}


/* #Media Queries
================================================== */

@media screen and (min-width: 320px) and (max-width: 1023px){
body{width:100%; background-image:none; background-color:#EBECE1; margin:0; padding:0; }


#wrapper{
width:100%;/*Breite der Seite*/
margin:0; padding:0;
}

.pfeil{margin-left:-10px;}
h3.pfeil{background-position:0 13px;}

p{padding:0 20px 10px 10px;}

h1{margin-left:-10px;}

h3{padding:10px 0 0 10px;}	
	

/*NAVIGATION*/
.nav-pc{display:none;}
.nav-mobil{display:block; position:relative; margin: 0;  padding: 0px; width:100%; font-size:20px; color:#555; font-weight:550; text-align:center; line-height:2.3em; letter-spacing:0; }


/*Auf dem PC: .pc sichtbar, .mobil unsichtbar*/
.mobil{display:block;}
.pc{display:none;}

/*LOGO HENNING STUDTE - CARTOONS*/
.mittig{margin: 0 auto; margin-top:20px; margin-bottom:20px;}
.mittig .pict-head{margin: 0 auto; width:100%; }


.container{float:left; margin:0; padding:0; width:100%; padding-bottom:180px;
border:none;
background-image:none;}

/*HAUPTSPALTE*/
#main-column{clear:left; width:100%; margin:0; padding:0; padding-left:10px; padding-right:10px; }


.content{margin:0; padding:0 10px 0 15px; width:100%;}
.content2{ width:100%; margin-left:10px; margin-right:10px;  padding:0 10px 0 20px; }/*Freunde/Kollegen*/

/*RECHTE SPALTE*/
#right-column{max-width:100%; width:100%;  margin:0; padding:0;  text-align:center;}

/*Seite Vita--------------------------------------*/
/* Profilbild*/
.vita .pict-top{margin:0 auto; margin-top:30px;}
/*Seite Vita: rechte Spalte neben dem Bild*/
.about{margin:0 auto; padding:30px 10px 30px 10px; max-width:600px;}
.about h1{background-image:none;}
/*-------------------------------------------*/

/*Slideshow */

.mySlides .slide{
	min-height:350px;
	background:#FFF;
    border-bottom:1px solid #ccc;
}

/* Slideshow container, 6.8.2018: nur temporär */
.slideshow-container { margin-top:0px;}
/*6.8.2018: nur temporär*/
.mySlides .slide{min-height:auto;}
	
/* Next & previous buttons */
.prev, .next { top: 300px;}

.prev:hover, .next:hover {
 color:#555; background-color: rgba(0,0,0,0);
}

/* The dots/bullets/indicators */
.dot {margin: 0 10px 40px 10px;}
	
/*-----------------------------------------------------------------*/

.katalog-startseite{margin:0 0 30px 20px;}
.katalog .mySlides .slide{
	min-height:auto;
}
.katalog .dot{display:none; height: 7px; width: 7px; margin: 0 5px 40px 5px;}

/*Grosses Bild*/
.pict-top{clear:left; margin:0 auto;max-width:600px;  margin-bottom:0px; }
.picts img {width:100%; height:auto; margin-bottom:20px;}
.picts p{padding:0 5px 20px 5px;}

/*Text unter "Über mich*/
.spalte1{float:left; width:100%; margin-right:0;}
.spalte2{float:left; width:100%;}
.spalte2 p{padding-right:0;}

.pict-narren{ width:100%; min-height:auto; margin-left:-5px; padding:0 10px 0 10px; text-align:center; }
.pict-narren img{width:100%; margin:0; padding:0; height:auto;}

.hans-moser{margin-left:-5px;}


/*Kontaktbox im Text*/
.box{position:relative; float:left; margin:0 auto;  margin-bottom:20px; width:100%;  border:2px solid #EA8C00; }
ul.kontakt-startseite{position:relative;  padding:20px 0 5px 20px; }

.footer{ width:100%; margin:60px 10px 30px -3px;}

.footerbox1, .footerbox2{float:left; width:100%; min-height:auto; padding:15px 0 20px 0; margin:0 0 20px 0px; background:#EA8C00;}
.footerbox2 p{margin-top:-10px; padding-left:10px;}
.content2 .footerbox1, .content2 .footerbox2{ left:-5px; margin:0 auto; margin-bottom:20px;}
.law{ top:20px; border:none; }

#right-column{display:none;}




/*Buchillustrationen*/
#illustration #main-column{float:left; margin:0; padding:0 10px 0 10px; width:100%;}

/*Grosses Bild*/
#illustration .pict-top{clear:left; margin:0 auto; max-width:100%; height:auto; border:1px solid #999;  margin-bottom:50px; background:#FFF;}
#illustration .pict-top img{margin:0 auto;}

#illustration #bildunterschrift{ margin:0; max-width:100%;}
#illustration h1{ margin:0px; padding:0; padding-left:15px; max-width:100%;}

#illustration #forward-back{clear:left; margin-left:0; padding:0; width:100%;}

#illustration .nummern-illustration{clear:both; margin:-10px 0 0 10px; max-width:100%;}
#illustration .nummern-illustration ul{float:left; padding:5px 0 0 0; margin-left:0px;}

/*Text unter Bild*/
#illustration .content{margin:0; padding:10px 0 0 0; width:100%; /*background:#eaeaea;*/}
#illustration .content p{padding:0 10px 40px 10px;}

/*Text unter Buch*/
#illustration .txt{clear:both; padding:0;padding:0; margin:0; width:100%;}
#illustration .txt p{margin:0; padding:25px 10px 0 10px;}


#illustration #right-column{display:none;}
#illustration .right-column{display:block;}



/*Nur in der mobilen Version sichtbar*/
#illustration .right-column{position:relative; float:left; margin:0; margin-top:20px; max-width:100%; height:100%; padding:0;}
#illustration .buchicons{float:left; margin-top:50px; margin:0; padding:0; padding-left:10px; max-width:100%; height:100%; }

#illustration .icon{float:left; width:180px; margin:0 0 10px 0;}

#illustration .icon img{margin-left:20px;}
#illustration .icon p{text-align:left; padding-left:20px;}
#illustration .icon .highlight{margin-left:0; padding-left:20px; background-image:url("picts/pfeil_orange_weiss.gif"); background-position:left 4px; background-repeat:no-repeat; }

#illustration .footer{float:left;}
/*Impressum/Datenschutz*/
#illustration .law{margin:0 auto; left:0px; width:70%; }
#illustration .law p{margin:0 auto; width:100%;}

}



@media screen and (min-width: 767px) and (max-width: 1023px){
body{background-image:none;}
#wrapper{width:100%; margin:0 auto; padding:0;}



.mittig, .start{margin: 0 auto; left:auto; margin-bottom:20px;}
.mittig .pict-head{right:auto; width:400px; }


.container{float:left; margin:0 10px 0 0px; width:100%; border:none; background-image:none;}

/*Auf dem PC: .pc sichtbar, .mobil unsichtbar*/
.mobil{display:block;}
.pc{display:none;}


/*HAUPTSPALTE*/
#main-column{margin:0 auto; width:100%; padding-left:0px; padding-right:0px;}
.content{margin:0 auto; width:100%;  padding-right:10px; }
.content2{margin:0 auto; width:100%;  padding:0 10px 0 10px }


/* Next & previous buttons */
.prev, .next {
  top: 80%;
}

/* The dots/bullets/indicators */
.dot {margin: 0 10px 40px 10px;}
/*-----------------------------------------------------------------*/


.hinweis{position:relative; clear:both; margin:0 auto;}
/*Kontaktbox im Text*/
.boximtxt{position:relative; clear:both; margin:0 auto;  margin-bottom:20px;  max-width:550px; border:2px solid #EA8C00; }
ul.kontakt-startseite{position:relative;  padding:20px 0 5px 20px;  }


/*Grosses Bild*/
.pict-top{clear:left; margin:0 auto; width:600px;  margin-bottom:0px; }
.picts img {width:100%; height:auto; margin-bottom:20px;}
.picts p{padding:0 5px 20px 5px;}



/*Text unter "Über mich*/
.spalte1{float:left; width:100%; margin-right:2%;}

.spalte2{float:left; padding-right:10px; padding-bottom:40px; width:100%;}
.spalte2 p{padding-right:10px;}

.pict-narren{ width:100%; min-height:auto; padding:0 20px 0 15px; text-align:center; }
.pict-narren img{width:100%; margin:0; padding:0; height:auto;}



.pfeil{margin-left:5px;}


.hans-moser{position:relative; clear:both;  margin-left:auto; margin-right:auto; top:50px; max-width:800px; padding-top:30px; padding-bottom:30px; border:2px solid #EA8C00;}


.links, .vita{margin:0 auto; width:90%;}

.footer{position:relative;  margin:0 auto; width:670px; margin-top:60px; margin-bottom:30px;}
.footerbox1{position:relative; float:left;/* margin:0 auto;*/ width:300px; min-height:250px; padding:0; padding-top:5px; background:#EA8C00;}
.footerbox1 li{margin-left:40px; margin-bottom:0;}
.footerbox2{position:relative; float:right;/* margin:0 auto;*/ width:300px; min-height:250px; padding:0; padding-top:5px; padding-bottom:10px; background:#EA8C00;}
.footerbox2 p{margin-left:30px; padding-bottom:0;}


/*Buchillustrationen*/
#illustration #main-column{padding:0; margin:0 ; padding:0 10px 0 10px; width:100%; }
#illustration #right-column{display:none;}
#illustration .right-column{display:block;}
#illustration .pict-top{}
#illustration #bildunterschrift{clear:left; margin:0 auto; padding:0 30px 0 0; max-width:600px; background-image:none; }

#illustration h1{font-size:18px; float:left;  padding:0; background-image:none; width:auto; }
#illustration #forward-back{float:left;margin:0 auto;}
#illustration .nummern-illustration{float:left; margin-left:0px;}
#illustration .nummern-illustration ul{float:left; padding:5px 0 0 0; }

/*Text unter Buch*/
#illustration .txt{clear:both; margin:0 auto; width:650px;}
#illustration .txt p{padding:25px 0px 0 0px;}


/*Nur in der mobilen Version sichtbar*/
#illustration .right-column{position:relative; float:left; margin:0; margin-top:20px; max-width:100%; height:100%; padding:0;}
#illustration .buchicons{float:left; margin-top:50px; margin:0; padding:0; padding-left:10px; max-width:100%; height:100%; }

#illustration .icon{float:left; width:180px; margin-left:0px;}

#illustration .icon img{margin-left:20px;}
#illustration .icon p{text-align:left; padding-left:20px;}
#illustration .icon .highlight{margin-left:0; padding-left:20px; background-image:url("picts/pfeil_orange_weiss.gif"); background-position:left 4px; background-repeat:no-repeat; }


#illustration .footer{position:relative;  margin:0 auto; width:670px; height:100%; top:60px; margin-bottom:30px; background:transparent;}
#illustration .footerbox1{position:relative; float:left; margin:0 ; width:300px; min-height:250px; padding:0; padding-top:5px; background:#EA8C00;}
#illustration .footerbox2{position:relative; float:right; margin:0 ; width:300px; min-height:250px; padding:0; padding-top:5px; padding-bottom:10px; background:#EA8C00;}


#illustration .footer p{padding:0; margin:0;}

#illustration .footerbox2 p{margin-top:-10px; padding-left:40px;}


/*Impressum/Datenschutz*/
#illustration .law{position:relative;clear:both; margin:0 auto; top:90px; left:0px; width:70%;}
#illustration .law p{margin:0 auto; width:300px;}

}




@media screen and (min-width: 1024px) and (max-width: 1199px){
/*body{background-image:none;}*/
#wrapper{width:1024px; margin:0; padding:0;}

/*Grauer Hintergrund*/
.container{float:left;  width:1024px;
border:none;
background-color:#EBECE1;
}
#main-column{
float:left;
width:700px;
padding:0 auto 50px 0px;
background-color:#EBECE1;
}
#right-column{float:left; width:300px; margin:0; padding:170px 0px 20px 0px; background-color:#EBECE1;}

.content{float:left;  margin:0 0px 50px 0px;  width:1024px; height:100%; background-color:#EBECE1;}

.content2{float:left; margin:0 0 50px 0; width:1024px;  padding:0 10px 0 0px; }


/*Slideshow Startseite*/
/* Next & previous buttons */
.prev, .next { top: 50%;}

/* The dots/bullets/indicators */
.dot {margin: 0 10px;}
/*-----------------------------------------------------------------*/

/*Text unter "Über mich*/
.spalte1{float:left; width:50%; margin-right:4%;}

.spalte2{float:right; width:46%;}
.spalte2 p{padding-right:0;}

.vita .pict-top{margin-left:70px;}

.links, .vita{margin:0 auto; width:600px;}

#illustration #main-column{padding:0; margin:0 ; padding:0 10px 0 10px; width:750px; }
#illustration #right-column{display:block;}
#illustration .right-column{display:none;}


/*Text unter Buch*/
#illustration .txt{clear:both; margin:0 auto; width:100%;}
#illustration .txt p{padding:25px 10px 0 10px;}

#illustration .footer{ background-color:#EBECE1;}





#illustration .content{ padding:0 60px 50px 50px; width:100%; height:100%;  /*background:#eaeaea;*/}





#illustration #hinweis{padding-bottom:50px; }

/*Impressum/Datenschutz*/
#illustration .law{margin:0 auto; left:-50px; width:1024px; border:none; background:#EBECE1;}
#illustration .law p{text-align:center; margin:0 auto; padding:10px 0 10px 0; border-top:2px solid #EA8C00;}
}


/*Nach oben Pfeil: css im Ordner css*/