html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


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

(http://fonts.googleapis.com/css?family=Open+Sans:400,700,300|Roboto:400,700);



@font-face {
    font-family: 'GothamLight';
    src: url('fonts/gotham-light.eot');
    src: url('fonts/gotham-light.otf') format('opentype'),
         url('fonts/gotham-light.eot?iefix') format('embedded-opentype'),
         url('fonts/gotham-light.woff') format('woff'),
         url('fonts/gotham-light.ttf') format('truetype'),
         url('fonts/gotham-light.svg#gothamlight') format('svg');}




body {margin: 0; color: #666;  font-family: 'GothamLight', 'Roboto',  "Helvetica Neue", Helvetica, Arial, sans-serif;inherit;font-weight:300;
font-size: 100%;line-height: 150%;background-color: #fff;text-align:center}

a {color: #666;text-decoration: none;}
a:hover {color: #433281;text-decoration: none;}

h1,h2, h3, h4, h5, h6 {margin: 0px 0;font-family: inherit;font-weight:300;}
h1,h2  {width: 90%;margin: 0px 4.5% 0 5%!important; font-size:2.7em;line-height: 2.6rem;color:#666;text-align:center;text-transform:uppercase;letter-spacing: 0.2em;}

h2  {margin-top:15px!important;}
h2, h3, :target,
h2:target,
h3:target,
h4:target,
p:target  {
  scroll-margin-top: 150px!important; /* Abstand vom fixierten Balken */
}


h3, .ceo {font-size:1.2em;line-height: 1.7em;color:#666;width: 90%;margin: 0px 4.5% 0 5%!important;font-weight:300;letter-spacing: 0.1em;}
#ebook h3 {font-weight: bold; margin:15px 0 0 !important}

h4 {font-size:1.3em;line-height: 115%;color:#666;margin-bottom:0.7em}
h5 {font-size:1.4em;font-size:1.6em;font-weight:normal;}
h5 .orange {color:#433281;font-weight:bold}
h6 {font-size: 11.9px;}

p, ul li{font-size: 1.1em;line-height:1.4em; font-weight:300;}
p {margin: 0 0 0px;}
ul, ol {padding: 0;margin: 0 0 10px 25px;}
li {line-height: 20px;}

.center {text-align:center}
img {width: 100%; height: auto;vertical-align: middle;border: 0;-ms-interpolation-mode: bicubic;}

.container {margin-right: auto;margin-left: auto;*zoom: 1;}
strong {font-weight: bold;}
em {font-style: italic;}


.wraper  {text-align:left;margin:0 auto;position:relative;}
#menu{position:relative!important;width:100%;margin:0;overflow:hidden;}
#top {width:100%;position:absolute;top:0; left:0;z-index:500!important}
.menu a.link  {padding:5px 25px 12px 25px; color:#fff}
.menu a.link:hover  {background:#fff;color:#433281}

.rund {overflow:hidden;-webkit-border-radius: 10px; -moz-border-radius: 10px;border-radius: 10px;}  
.hellblau {background:#5e70af;background:#bb73ab}
.blau {background:#433281;}
.azur {background:#829cd0;}
.azur2 {background:#4c80c1;}
.blue {background:#4ac3f2}
.gelb {background:#e8a55d}
.lila {background:#765598}
.pink {background:#dc8e9c;}
.dunkelblau {background:#004494;}
.helllgrau {background:#e6e6e6;}
.grau {background:#5d3581;}
.hellblau, .blau, .grau, .dunkelblau {padding:20px 15px;}
.hblau, .link  {color:#433281}
.pblau {color:#433281;margin:15px 0 7px 0}
.weiss {background:#fff;padding:30px}




.blau, .blau p, .blau a, .blau h1,  .blau h2, .blau h3, .blau h4, .blau h5, .blau h6, 
.hellblau,  .hellblau p ,  .hellblau a,  .hellblau li, .hellblau h1, .hellblau h2, .hellblau h3,  .hellblau h4 , .hellblau h5, .hellblau h6,
.dunkelblau, .dunkelblau a, .dunkelblau p, .dunkelblau h1, .dunkelblau h2, .dunkelblau h3, .dunkelblau h4, .dunkelblau h5, .dunkelblau h6,
.grau, .grau a, .grau p, .grau h1, .grau h3, .grau h4 {color:#fff}

.weiss, .weiss p, .weiss a,  .weiss h3, .weiss h4  {color:#666}
.weiss a {color:#433281;font-weight:bold}




footer {margin:0;position:relative;text-align:left;}
.linkleft {float:left}
.linkrechts {float:right}
.footerlinks  {padding:0 0 40px  0}
.footerlinks a {display:inline-block;padding:0px 15px ;}    
.footerlinks a:hover {color:#e8a55d!important}    



.voll   {padding:50px 0 50px 0;}
.inhalt {width:70%;display:block;  margin:40px 14% 0px 15%!important; overflow:hidden}

.halb {width:47%; margin:0; float:left }
.halbleft { margin:0 5.9%  0 0 }
.drittel {width:31%; margin:0 1.9% 0 0; float:left }
.headline {margin:30px 0 0px 0}


footer h3, footer h4 {line-height: 1.2em;}
footer p {text-align:left}


     #logolink{position:relative; top:0; left:0;float:left}
     #logo {width:180px}
        
    .telefon {
            position:absolute; 
            top:0px;right:0;
            width:100%;
            padding:0;
            background:#4ac3f2;
            position:fixed;
            z-index: 2000;
        }
     .wraper {margin-top:130px;}
    .telefon h5 {
            text-align:center;
            color:#fff;
            font-size:2.3em;
            line-height: 1.2em;
            margin:23px 0 5px;
        }
     
    .viertel   {
        width:20%!important; 
        margin:0px 1.9% 20px 0!important;
        float:left;
        height: 210px;
        border-radius: 0 80px 0 80px;
     }
         
     .inhalt {overflow: hidden}
    .viertel p {text-align:left}
            
            @media (max-width: 1150px)
    .viertel   {width:46%!important; margin:0px 1.9% 10px 1.9%!important; }
     #bilder .drittel  {width:30%!important;margin:0 1.5%!important;}
     .rahmen {border-radius: 0 100px 0 100px;}
     .recht {border-radius: 100px 0 100px 0;}
     .bild {background:url(bild.jpg) top right no-repeat;}
     .border {border:solid;border-width:10px;border-color: white}
     h4.hblau {font-size: 32px;}
     #sub, #sub1 {font-size:2.0em!important;padding-bottom:20px!important}
     .ganz {width:100%;height:20px!important; margin:0!important;padding:0!important;border:0;background:#bb73ab }
     .minus {margin-top:0px!important}
     #pin {position:absolute; position:fixed;top:450px; right:0px;z-index: 200;width:260px;}
     #pin h5 {margin:-15px 0 0 -20px}
     #pin h5 a:hover {color:#e8a55d}
     .lcv {max-width: 400px}