/* = = = = = = = = = = = = = = = = = datei format.css = = = = = = = = = = = = = = = = = = = = = = = = = */



/* ############################################################ */
/* allgemein */
/* ############################################################ */

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


html, body {
    font-family:'open_sanscondensed_light', tahoma,georgia,  arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
    font-size:62.5%;
    line-height:1.5;
}

body {
    height:100%;
    font-size:1.8rem;
    margin: 0 auto;
    overflow-x:hidden;
    color:#092124;
}

h1, h2, h3, h4, h5 {
    color:wheat;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
}

h1 {
    font-size:3rem;
    line-height: 3.5rem;
    margin-top: 0rem;
    margin-bottom: 5.2rem;
}

h2 {
    font-size:2.3rem;
    line-height: 3rem;
    margin-top: 1rem;
    margin-bottom: 3.5rem;
    letter-spacing:2px;
}

h2:after {
    display:block;
    border-top: 1px solid white;
    width: 70px;
    content: "";
    margin-top: 2rem;
}


h3 {
    font-size:1.8rem;
    line-height: 2.3rem;
    margin-top: 1rem;
    margin-bottom:2.5rem;
    text-transform:none;
    letter-spacing:1px;
}


/* quelltext-erkl rungen - wenn vorhanden */

pre {
    white-space:pre-wrap;
    position:relative;
    font-size:1.5rem;
    font-family: arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
    padding:0rem 1rem 2rem 1rem;
    margin:4rem auto;
    text-align:center;
    border:dashed 0.1rem #CBEAF3;
    background:transparent;
}

pre .extra {
    display:inline-block;
    position:absolute;
    left:-1.5rem;
    top:1.5rem;
    font-size:1.8rem;
    color:#0F3846;
    font-weight:bold;
    background:#fff;
    padding:0 .5rem;
    transform:rotate(-45deg);
}

/*  ----------------------------------------  */
/* allgemeine links */
/*  ----------------------------------------  */

a {
    color:#E7F3FE;
    text-decoration: underline;
    cursor:pointer;
}

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


/* ############################################################ */
/*  speziell*/
/* ############################################################ */

/* bilder -anpassen der gr sse */
img {
    max-width: 100%;
    display:block;
    margin:0 auto;
    height: auto;
}

/*  ----------------------------------------  */
/*   MEHR LESEN-BUTTON  */
/*  ----------------------------------------  */

.button  {
    display:block;
    margin:3rem 0 1rem 0;
    text-align:left;
}

.button .mehr_lesen a {
    display:inline-block;
    background:#x0288D1;
    color:#C2EAF3;
    text-decoration:none;
    padding:.3rem 1.5rem .3rem 1rem;
    border-radius:0;
    transition:all  .3s ease-out;
    cursor:pointer;
    border:solid 1px #CAE9F4
}

.button .mehr_lesen a:hover {
    color:#fff;
    border:solid 1px wheat;
}


/*  icon beim MEHR LESEN-BUTTON */

.button .mehr_lesen a:before {
    display:inline-block;
    font-family:'Font Awesome 5 Free';/* - 'Font Awesome 5 Free' for Regular and Solid symbols;
                                         - 'Font Awesome 5 Brands' for Brands symbols. */
    font-weight: 900;/*  Weight of the font (mandatory)
                         - 400 for Regular and Brands symbols;
                         - 900 for Solid symbols. */
    content:"\f0da" ;
    transform:scale(.9);
    color:#fff;
    padding: 0 .5rem 0 0;
    margin:0;
}

.button .mehr_lesen a:hover:before {
    color:khaki
}



/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */
/*  GRID-SYSTEM  - f r Bilder / Spalten */
/* = = = = = = = = = =  = = = = = = = = = =  = = = = = = = = = = = = = = = = = = = = */


.box {
    display:inline-block;
    vertical-align:top;
    width:100%;
    padding:.4rem;
    text-align:left;
    margin:0rem -.25rem -.25rem -.25rem ;/* ausgleich ( minus-margin) f r INLINE-BLOCK-WHITESPACE-BUG*/
}

/*  boxen - grundsystem */
.box-1_of_1 ,
.box-1_of_2 ,
.box-1_of_3,
.box-1_of_4,
.box-1_of_5 {
    width:100%;
}


/*  boxen - f r abweichungen vom boxen-grundsystem */

.about .box-1_of_2 {
    width:100%;
}
.box-1_of_4b  {
    width: 50%;
}
#gallery .box-1_of_3 {
    width:33.33%;
}
#gallery img:hover  {
    opacity:.8;
    filter: grayscale(1);
    box-shadow:0 0 1px black;
}
#fuss .box-1_of_2  {
    width: 100%;
}


/*  -----  zur abgrenzung von '.box-1_of_2' sowie bei verschachtelten boxen  ----- */

.containerbox-1_of_2 {
    width:100%;
}


/* ############################################################ */
/* bereich header */
/* ############################################################ */

header {
}


/* ############################################################ */
/* bereich top */
/* ############################################################ */

#top {
    display:block;
    background:#01579B;
    margin: 0 auto;
    padding:0rem;
}

.top-a {
    POSITION:relative;
    background:#0277BD;
    display:block;
    margin:0 auto;
    padding:2rem 0rem 2rem 0rem;
}

/* homepagename  */

.name {
    display:block;
    color:wheat;
    width:auto;
    font-weight:normal;
    text-align:center;
    margin:0 auto;
    padding:1rem 1rem 1rem 1rem;
    font-size:2.5rem;
    line-height: 2.8rem;
}

.name span {
    padding:.2rem 0;
    display:block;
    color:#EFEFEF;
    font-size:1.6rem;
    line-height: 1.9rem;
}



/* ############################################################ */
/* bereich logo */
/* ############################################################ */

#logo-wrapper {
    display:block;
    background:#024175;
    color:#CBCED8;
    margin:0 auto;
    padding:0rem 0rem 0rem 0rem;
}

#logo {
    display:block;
    background:#012E52;
    width:100%;
    margin:0 auto;
    text-align:center;
}

.logo-a  {
    background:transparent;
}

.logo-b  {
    height:28rem;
    background:transparent;
    background-image:url(../images/kopf.jpg);
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-size:cover;
    padding:2rem 0;
}


/* fotos logo-bereich unterseiten */

#logo .logo-b.foto-index1  {
    background-image:url(../images/kopf1.png);
}

#logo .logo-b.foto-index2  {
    background-image:url(../images/kopf2.jpg);
}

#logo .logo-b.foto-index3  {
    background-image:url(../images/kopf3.png);
}

#logo .logo-b.foto-index4  {
    background-image:url(../images/kopf4.png);
}

#logo .logo-b.foto-index5  {
    background-image:url(../images/kopf5.png);
}

#logo .logo-b.foto-index6  {
    background-image:url(../images/kopf6.png);
}



#logo .logo-b.foto-index31  {
    background-image:url(../images/kopf31.png);
}

#logo .logo-b.foto-index32  {
    background-image:url(../images/kopf32.png);
}

#logo .logo-b.foto-index33  {
    background-image:url(../images/kopf33.png);
}

#logo .logo-b.foto-index34  {
    background-image:url(../images/kopf34.png);
}

#logo .logo-b.foto-index35  {
    background-image:url(../images/kopf35.png);
}




/* ############################################################ */
/* bereich inhalt */
/* ############################################################ */

main#inhalt {
    display:block;
    background:#01579B; /* gilt f r die unterseiten, f r die startseite (index.html) wird es jedoch durch NTH-CHILD  berschrieben */
    padding:0rem 0rem 0rem 0rem;
    margin:0 auto;
}

.inhalt-a {
    display:block;
    background:#0277BD; /* gilt f r die unterseiten, f r die startseite (index.html) wird es jedoch durch NTH-CHILD  berschrieben */
    width:100%;
    margin:0 auto;
    padding:6rem 2rem 7rem 2rem;
    color:#E7F3FE
}

li#seminarliste {
    padding: 2px 0px;
}

/*  ----------------------------------------  */
/*  NTH-CHILD - jeder ungerade (odd) abschnitt, also 1, 3, 5 , 7 usw. */
/*  ----------------------------------------  */

.section-inhalt:nth-child(odd) {
    background:#01579B;
}

.section-inhalt:nth-child(odd) .inhalt-a {
    background:#0277BD;
}


/*  ----------------------------------------  */
/*  NTH-CHILD - jeder gerade (even) abschnitt , also 2, 4, 6 , 8 usw. */
/*  ----------------------------------------  */

.section-inhalt:nth-child(even) {
    background:#0277BD;
}

.section-inhalt:nth-child(even) .inhalt-a {
    background:#012E52;
}


/*  ----------------------------------------  */
/*  NTH-CHILD - nur der dritte (3) abschnitt */
/*  ----------------------------------------  */

.section-inhalt:nth-child(3) {
    background:#012E52;
    color:#CFCFCF;
}
.section-inhalt:nth-child(3) .inhalt-a {
    background:#024175;
    color:#CFCFCF;
}


/*  ----------------------------------------  */
/*  box ABOUT */
/*  ----------------------------------------  */

.about {
    padding:0 0rem ;
}
.about .box {
    vertical-align:middle;
}
.about .innerbox {
    background:rgba(0,0,0,.3);
    padding:1rem 1.5rem 1rem 1.5rem ;
}


/*  ----------------------------------------  */
/*  Schieberegler Jquery 'Slick'              */
/*  ----------------------------------------  */

/* allgemein  */

.myslider img {
    padding:0 0.5rem ;
}
.myslider article.text i {
    color:silver
}
.myslider article.text {
    text-align:center;
    padding:2rem 0 0 0;
}
.myslider article.text h3{
    text-align:center;
}


/*  ----------------------------------------  */
/*  box TESTIMONIALS */
/*  ----------------------------------------  */

/*  Testimonials (Das sagen die Kunden) */

.testimonials  {
    display:block;
    text-align:center;
    margin:-2rem 0 0 0
}

.testimonials .icons i {
    display:block;
    text-align:center;
    margin:0 auto;
    font-size:8rem;
    width:16rem;
    height:16rem;
    line-height:14rem;
    color:white;
    text-shadow:0 0 1px rgb(0,0,0,.3);
    background:#1A637B;/* IE9 */
    background:linear-gradient(135deg,#31AAD2 50% ,#1C6780 50%);
    border-radius:36rem;
    border:outset 1rem white;
    margin: 0 auto;
}




/* ############################################################ */
/* bereich fuss */
/* ############################################################ */

footer {
    background:#024175;
    margin:0;
    padding:0rem 0 0 0 ;
}

#fuss {
    display:block;
    width:100%;
    margin: 0 auto;
    padding:0rem 0rem 0rem 0rem;
}

.fuss-a {
    display:block;
    background:#01579b;
    margin: 0 auto;
    padding:2rem 1rem 2rem 2rem;
    border-bottom:solid 1px rgba(0,0,0,.15);
}

#fuss .box {
    text-align:left;
    padding:0rem 1rem;
    margin:.5rem -.22rem;
}

#fuss h3 {
    text-align:left;
    font-size:1.6rem;
    letter-spacing:1px;
    font-weight:bold;
    margin-bottom:1rem;
    text-transform:uppercase;
    margin-top: 0rem;
    margin-bottom:.5rem;
}

#fuss .box article {
    margin-bottom:1.5rem;
}


/* ----- fussmenu, icons ----- */

.fussmenu  ul {
    text-align:left;
    list-style: circle;
    padding: 0;
    margin: 0;
}
.fussmenu li {
    display:block;
}

.fussmenu li i,
.fussmenu li a i {
    color:wheat;
    transition:all .9s ease-out ;
    font-size:1.3rem;
    margin-right:1rem;
}

.fussmenu li a:hover i {
    color:#fac17e;
    transform: rotateY(360deg);
}


/*  ----------------------------------------  */
/*  die wesentlichen schriftformate f r den gesamten footer plus fussmenu */
/*  ----------------------------------------  */

#fuss,
#fuss a,
.fussmenu li.kein-link {
    color:#EFEFEF;
    font-weight:normal;
    font-size:1.6rem;
    line-height:2.2rem;
    text-decoration:none;
}

#fuss li a:hover  {
    color:#fff;
    text-decoration:underline
}



/* ############################################################ */
/* M E D I A   Q U E R I E S */
/* CSS Bildschirmabfragen */
/* ############################################################ */

/* ==================================== ab 320 pixel ================================== */
@media (min-width: 320px) {

    /* - hinweis - f r die kleinste smartphone-aufl sung von 320 pixel ben tigen wir KEINE bildschirmabragen (css-media queries),
    denn hierf r gilt ja automtisch der gesamte vorstehende quelltext-code  -
    weil wir das template ja 'MOBILE-FIRST' angelegt haben.
    */

}


/* ==================================== ab 360 pixel ================================== */
@media (min-width: 360px) {

    /* keine angabe */

}


/* ==================================== ab 480 pixel ================================== */
@media (min-width: 480px) {

    .top-a  {
        width: 85%;
    }
    .inhalt-a  {
        width: 85%;
        padding:6rem 4rem 7rem 4rem;
    }
    #logo  {
        width: 85%
    }
    .fuss-a  {
        width:85%;
    }

    .box-1_of_2  {
        width: 50%;
    }
    .box-1_of_3  {
        width: 33.33%;
    }
    .box-1_of_4  {
        width: 50%;
    }

}


/* ==================================== ab 580 pixel ================================== */
@media (min-width: 580px) {

    /* keine angabe */

}


/* ==================================== ab 640 pixel ================================== */
@media (min-width: 640px) {

    #fuss .box-1_of_2  {
        width: 50%;
    }

}


/* ==================================== ab 760 pixel ================================== */
@media (min-width: 760px) {

    html {
        font-size:70%;
    }

    #logo {
        display:table;
        width: 85%;
        border-spacing:0rem .1rem;
        table-layout:fixed;
        border-collapse:separate;
        padding:1.5rem 1.5rem ;
    }

    .logo-a  {
        display:table-cell;
        vertical-align:middle;
        padding:0rem 1rem;
        text-align:left;
    }

    .logo-b  {
        display:table-cell;
        vertical-align:middle;
        padding:0rem 1rem;
        text-align:right;
        height:10rem;
    }


    #fuss,
    #fuss a {
        font-size:1.3rem;
    }

    #fuss .box h3 {
        font-size:1.3rem;
    }

}


/* ===================================== ab 960 pixel ================================= */
@media (min-width: 960px) {

    .name {
        font-size:3rem;
        line-height: 3.3rem;
    }
    .name span {
        font-size:1.9rem;
        line-height: 2.2rem;
    }

    .box-1_of_4  {
        width: 25%;
    }
    .testimonials .box-1_of_1  {
        width: 60%;
    }
    .containerbox-1_of_2 {
        width: 50%;
        padding:0 1rem;
    }

    .fuss-a  {
        padding:3rem 4rem 3rem 4rem;
    }

}


/* ===================================== ab 1024 pixel ================================= */
@media (min-width: 1024px) {

    pre {
        width:70%;
    }

}


/* ===================================== ab 1280 pixel ================================= */
@media (min-width: 1280px) {

    .top-a  {
        width: 75%;
    }
    .inhalt-a  {
        width: 75%;
    }
    #logo  {
        width: 75%
    }
    .fuss-a {
        width:75%;
    }

}


/* ===================================== ab 1400 pixel ================================= */
@media (min-width: 1400px) {

    .top-a {
        width: 80%
    }
    #logo  {
        width: 80%
    }
    .inhalt-a  {
        width: 80%;
        padding:6rem 8rem 7rem 8rem;
    }
    .fuss-a {
        width:80%;
        padding:3rem 8rem 3rem 8rem;
    }

}


/*  +  +  +  +  + +  +  +  +  +  C O D E ENDE  +  +  +  +  +  +  +  +  +  +  */