/******************************* NOON.CSS *********************************/
/* Autor: noon mediengestaltung/Thomas Bartl                              */
/* Beginn: 07.01.2005                                                     */
/**************************************************************************/
/* CSS-File für noon - Version q23                                        */
/**************************************************************************/
/* 20050107: Neu-Definitionen                                   1905-1920 */
/* 20130424: Quickfix W4Y-Kündigung                             0200-0400 */
/* 20130425: Polaroid                                           2225-2230 */
/* 20130505: Background                                         1250-1300 */
/* 20130506: Background in PHP auslagern (dynamisch)            0140-0145 */
/* 20140721: HTML5                                              0015-0200 */
/* 20140722: HTML5                                              0030-0230 */
/* 20140722: HTML5                                              1150-1200 */
/* 20140722: Bereinigung                                        2130-2200 */
/* 20140723: Feinschliff                                        1050-1055 */
/**************************************************************************/

@font-face { font-family: Special1; src: url('Race-Coarse.otf'); /* font-style:normal; font-weight:normal; */ }
@font-face { font-family: Special2; src: url('Kavivanar-Regular.ttf'); /* Ludicrous-Stencil.otf */ }
@font-face { font-family: Special3; src: url('Simvoni.ttf'); }

#content
{
   position:relative;
   margin:20px auto 20px auto;
   min-width:500px;
   max-width:1100px;
   min-height:550px;
}

#header
{
   position:relative; 
   width:500px;
   height:500px;
   margin:0 auto 10px auto;
   background-repeat:no-repeat;
   background-image:url('bilder/nat_signet_schwarz.png');
   background-size:500px 500px;
   text-align:center;
}
#header img
{
   position:absolute;
   top:50%;
   transform: translate(-50%, -50%);
   width:150px;
}

#header.dsgvo
{
   width:150px;
   height:150px;
   background-size:150px 150px;
   float:none;
}

#header.dsgvo img
{
   width:80px;
}

#kontakt
{
   max-width:/*90%;*/ 500px;
   margin:0 auto 10px auto;
}

#footer { position:relative; clear:both; width:500px; margin:20px auto 10px auto; text-align:center; color:#000; padding:5px; z-index:1; } 
#footer a { margin:0 20px; padding:3px; border-top-left-radius:30%; border-bottom-left-radius:10%;  border-top-right-radius:10%; border-bottom-right-radius:30%; font-size:1.1em; }

/*#header, */
#leistungen, #kontakt { margin-top:25px; margin-bottom:50px; }
#signet { height:100px; margin-top:-10px; }

#kontakt > span { color:#666;}

#datenschutz { position:relative; margin:50px auto 20px auto; width:90%; /*width:500px;*/ }
#datenschutz > h1 { font-family:Special3, Helvetica, Verdana, Geneva, Tahoma, sans-serif; font-size:1.5em; margin:auto; }
#datenschutz > h2 { font-family:Special3, Helvetica, Verdana, Geneva, Tahoma, sans-serif; font-size:1.2em; margin-top:2em; }
#datenschutz > h3 { font-family:Special3, Helvetica, Verdana, Geneva, Tahoma, sans-serif; font-size:1.1em; margin-top:1.5em; }
#datenschutz > p { font-family:Special3, Helvetica, Verdana, Geneva, Tahoma, sans-serif; font-size:1em; }
#datenschutz > p > a { font-family:Special3, Helvetica, Verdana, Geneva, Tahoma, sans-serif; font-size:1em; }


body { margin:0px; background-color:#ffffff; }

body,p,br,h1,h2,h3,div,address,nobr,b,i,sub,sup,strong,span,input,textarea,select,option { font-family:Special3,Special2,Verdana,Arial,Helvetica,sans-serif; color:#000000; }

body,a,p,div,address,nobr,b,i,span,input,textarea { font-size:1em; line-height:1.2em; }

pre { font-family:Courier,sans-serif; font-size:8pt; line-height:1.2em; color:#000000; }

h1 { font-size:1.5em; font-weight:bold; margin:10px 0 10px 0; }
h2 { font-size:1.5em; margin:10px 0 0 0; }
h3 { font-size:1.5em; margin:0; }
h4 { font-size:1.5em; }
h5 { font-size:1.5em; margin:0; }

sub,sup { font-size:0.7em; }

a { color:#333; }
a:link { text-decoration:underline; }
a:visited { color:#666; text-decoration:none; }
a:active { text-decoration:none; }
a:hover { color:#fff; background:#000; opacity:100%; }

.spacer div { width:1px; height:1px; overflow:hidden; }

form { clear:both; line-height:1.2em; font-size:1.5em; color:#06f; }
form > div { color:#000; }
input, textarea { width:95%; height:25px; margin:11px 10px 12px 0; border:1px solid #000; background:#fff; opacity:50%; border-radius:5px; }
input { padding:10px; }
textarea { width:95%; height:300px; padding:10px; line-height:1.2em; }
input.senden {  width:100px; height:100px; opacity:100%; font-size:0.8em; color:#fff; background:#000; border:1px solid #000; border-radius:50px; }
input.senden:hover { background-color:#fff; background-image:url('bilder/nat_signet_schwarz.png'); background-size:100px 100px; background-repeat:no-repeat; border:none; color:#fff; }

.form .button { border:1px solid #2f84ab; background-color:#000000; font-size:1em; letter-spacing:0pt; line-height:1em; filter:Shadow(color=#000000, direction=45) } /*c4d7e8*/
.form .missing { color:#000; }
.form .status { border:1px solid #2f84ab; color:#2f84ab; margin:0px; }

.trennung { font-weight:normal; }

.grafik a img { background:#ffffff; font-size:0.1em; }

.content_zusatz a div span pre td { font-size:1em;  line-height:1.1em; }

.hervorhebung { font-weight:bold; color:#2f84ab; }

/* V2020 */
#leistungen > img { height:35px; margin-right:30px; }

#kontakt > div > span { width:100px; }
.senden { margin-top:-110px; margin-right:20px; float:right; }

#impressum { z-index:100; visibility:hidden; padding:20px; background:#fff; color:#000; line-height:1.2em; border:1px solid #000; border-radius:5px; 
position:relative; top:-883px; margin-left:auto; margin-right:auto; width:300px; 
/*position:fixed; left:28%; margin-top:10px; width:280px; */}

.datenschutz, .datenschutz span, .datenschutz a, .mensch > span { font-family:Special3, Helvetica, Verdana, Geneva, Tahoma, sans-serif !important; font-size:1em !important; margin-bottom:20px; }
.hinweis, .hinweis_ok { font-family:Special3, Helvetica, Verdana, Geneva, Tahoma, sans-serif; font-size:1em; background:#ff0; padding:20px; border-top-left-radius:20%; border-radius:5px; /* border-bottom-left-radius:5%; border-top-right-radius:5%; border-bottom-right-radius:20%; */ }
.hinweis_ok { background:#0d0; }
input.checkbox { width:25px; position:relative; top:3px;/*7px;*/}
.mensch > input { width:65px; }
.mensch > span.hinweis { color:#d00; }
textarea.missing, input.missing { border-color:#d00; }
span.missing { color:#d00; }



@media (max-width:600px)
{  
   #header
   {
      width:100%;
      max-width:420px;
      max-height:420px;
      background-size:420px 420px;
   }
   
   #kontakt, #datenschutz
   {  
      width:100%;
      max-width:450px;
   }

   input.senden { width:85px; height:85px; opacity:100%; font-size:0.7em; }

   input.senden:hover { background-size:85px 85px; }

   #impressum { top:-842px; }  
}

@media (min-width:1120px)
{  
   #header
   {
      float:left;
   }
   
   #kontakt
   {   
       float:right;
       width:500px;

/*   position:relative; 
   width:500px;
   height:500px;
   margin:0 auto 10px auto;
   clear:both;
   float:right;
*/
   }

   #datenschutz
   {
       width:1000px;
   }

   #impressum { top:-250px; }

   textarea { height:120px; }
}