/* Styles Christoph Hoeppel */

@charset "utf-8";

/* Google Fonts - Schriften einbinden */

@import url('https://fonts.googleapis.com/css?family=Cinzel:400,700|Poppins:300,400,500,600');
html {
    box-sizing: border-box;
    font-size: 100%;
}

html,
body {
    height: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    height: auto;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-size: .875rem;
    font-weight: 400;
    color: rgb(77, 77, 77);
    line-height: 1.6;
}

@media screen and (min-width: 50em) {
    body {
        font-size: 16px;
        font-size: 1rem;
        line-height: 1.7;
    }
}

body,
header,
main,
footer {}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', serif;
    color: rgb(36, 153, 69);
    font-weight: 400;
}

h1 {
    font-family: 'Cinzel', serif;
    font-size: 22px;
    font-size: 1.375rem;
    line-height: 1.2;
    text-transform: uppercase;
    text-align: center;
}

h2 {
    font-size: 14px;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.2;
    color: rgb(77, 77, 77);
    padding-top: 0.5em;
}

@media screen and (min-width: 50em) {
    h1 {
        text-align: left;
        font-size: 30px;
        font-size: 1.875rem;
    }
    h2 {
        font-size: 16px;
        font-size: 1rem;
    }
}

.left {
    float: left;
}

.right {
    float: right;
}

.clear {
    clear: both;
}


/*Bilder*/

img {
    width: 100%;
    height: auto;
    border: none;
}

p {
    padding-top: 0;
    padding-bottom: 0.5em;
    margin-top: 0;
}


/* Links */

a:link,
a:visited,
a:active,
a:focus {
    color: rgb(77, 77, 77);
    transition: color 1s ease;
    text-decoration: none;
}

a:hover {
    color: rgb(36, 153, 69);
    text-decoration: underline;
}

a.active {
    text-decoration: underline;
}


/* Extra Formatierungen */


/* halbfette Schrift */

.semibold {
    font-weight: 600;
}

.no-wrap {
    white-space: nowrap;
}


/* Blockelemente zentrieren */

.center-block {
    display: flex;
    justify-content: center;
}

@media screen and (min-width: 50em) {
    .center-horizontal {
        display: flex;
        align-items: center;
    }
}


/* Spalten */

.row {
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin: 0 auto;
}

.columns {
    padding-right: 1rem;
    padding-left: 1rem;
}

.column {
    padding-right: 0rem;
    padding-left: 0rem;
}

@media screen and (max-width: 49.9375em) {
    /* Zwei Spalten 60:40 */
    .small-60 {
        width: 100%;
    }
    /* Zwei Spalten 60:40 */
    .small-40 {
        display: none;
    }
    /* gleich lange Spalten */
    .flex-wrapper-small {
        display: table;
        /* Fallback aeltere Browser */
        display: flex;
        width: 100%;
    }
    .flex-box-small {
        display: table-cell;
        /* Fallback aeltere Browser */
        flex: 1 1 auto;
        min-width: 1%;
        /* fuer Firefox*/
    }
    .flex-box-small-b {
        display: table-cell;
        /* Fallback aeltere Browser */
        flex: 2 1 auto;
        min-width: 1%;
        /* fuer Firefox*/
    }
}


/*medium */

@media screen and (min-width: 50em) {
    /* Eine Spalte */
    .medium-1 {
        width: 100%;
    }
    /* Zwei Spalten 60:40  */
    .medium-60 {
        width: 60%;
    }
    /* Zwei Spalten 60:40*/
    .medium-40 {
        width: 40%;
    }
    /* gleich lange Spalten */
    .flex-wrapper {
        width: 100%;
        display: flex;
    }
    .flexi {
        display: inline-flex;
    }
    .flex-box {
        flex: 1;
    }
    .flex-box-b {
        flex: 2;
    }
}


/* Header */

header {
    margin: 0;
    padding: 0;
}

header .row {
   padding: 0;
}



/* Headerbild */

header .row+.headerbild {
    padding: 0;
}
header .headerbild img {
}
@media screen and (max-width: 49.9375em) {
    header .headerbild .header-img {
        display: none;
    }
    }
@media screen and (min-width: 50em) {
    header .headerbild .header-img-small {
        display: none;
    }
    }


/*Logo */

.logo img {
    max-width: 260px;
    height: auto;
    display: block;
   }

@media screen and (max-width: 49.9375em) {
    .logo .logo-medium {
        display: none;
    }
    .logo img {
        margin: 0 auto;
    }
}

@media screen and (min-width: 50em) {
    .logo .logo-small {
        display: none;
    }
    .logo img {
        max-width: 500px;
    }

}


/* Navigation */
header .nav-wrapper {
     background: rgb(36, 153, 69);
    padding: 0.5rem 0;
    
}
.navigation {
    color: rgb(255, 255, 255);
}

.navigation ul.menu {
    text-transform: uppercase;
}

nav ul.menu,
ul.menu-lang {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

@media screen and (max-width: 49.9375em) {
    ul.menu-lang {
        padding-top: 0.6em;
    }
    ul.menu-lang li a {
        color: rgb(255, 255, 255);
    }
    ul.menu-lang li a:hover {
        color: rgb(200, 200, 200);
    }
}

nav ul.menu li,
ul.menu-lang li {
    color: rgb(255, 255, 255);
    margin: 0;
    padding: 0 2em;
}

ul.menu-lang li {
    padding: 0 0.5em;
    border-right: 1px solid;
}

ul.menu-lang li:last-child {
    border-right: none;
    padding-right: 0;
}

nav ul.menu li:nth-child(2) {
    padding-left: 0;
}

@media screen and (min-width: 50em) {
    nav,
    .lang {
        padding: 0;
        margin: 0;
    }
    nav ul.menu li,
    ul.menu-lang li {
        /*  display: inline;
        flex-grow: 1;*/
    }
    nav ul.menu li a:link,
    ul.menu-lang li a:link,
    nav ul.menu li a:visited,
    ul.menu-lang li a:visited,
    nav ul.menu li a:active,
    ul.menu-lang li a:active,
    nav ul.menu li a:focus,
    ul.menu-lang li a:focus {
        margin: 0;
        display: inline-block;
        width: 100%;
        color: rgb(255, 255, 255);
        text-align: center;
    }
    nav ul.menu li a:hover,
    ul.menu-lang li a:hover,
    nav ul.menu li a.active,
    ul.menu-lang li a.active {}
    nav ul.menu li a:hover,
    ul.menu-lang li a:hover {
        color: rgb(200, 200, 200);
    }
}


/* Abstaende nach links und rechts, um eine Linie mit Content zu bilden */
 .navigation .nav {
        padding-left: 2rem;
     padding-right: 2rem;
}

@media screen and (min-width: 50em) and (max-width: 59.9375em) {
    .navigation .nav {
       font-size: 15px;
        font-size: .9375rem;
    }
    .navigation .lang {
       font-size: 14px;
        font-size: .875rem;
    }
    nav ul.menu li {
        padding: 0 1.1em;
    }
}

@media screen and (min-width: 60em) and (max-width: 79.9375em) {
    .navigation .nav {
       font-size: 16px;
        font-size: 1rem;
    }
    .navigation .lang {
        font-size: 15px;
    }
    nav ul.menu li {
        padding: 0 1.6em;
    }
}

@media screen and (min-width: 80em) {
    .navigation .nav {
        font-size: 18px;
        font-size: 1.125rem;
    }
}


/* offCanvas: Trolly */

@media screen and (max-width: 49.9375em) {
    .trolly .tr-affected {
        background: rgb(36, 153, 69);
        padding: 1rem;
        font-size: 16px;
        font-size: 1rem;
    }
    nav ul.menu li {
        padding: 0;
    }
    /* Close Button */
    .trolly .tr-affected li:first-child {
        padding-bottom: 0;
        float: right;
    }
    .trolly .tr-affected li:first-child a:hover {
        text-decoration: none;
    }
    .trolly .tr-affected li a {
        color: rgb(255, 255, 255);
        padding: 0.5em;
    }
    .trolly .tr-affected li a:hover {
        color: rgb(200, 200, 200);
    }
    .trolly .tr-affected li a.active {
        text-decoration: underline;
    }
    /* Hamburger */
    a.fa-bars {
        font-size: 28px;
        font-size: 1.75em;
        color: rgb(255, 255, 255);
        padding: 0.3em;
    }
    .trolly a.fa-bars:hover {
        color: rgb(200, 200, 200);
        text-decoration: none;
    }
    /* Close Button */
    .trolly li.only-on-small a:link,
    .trolly li.only-on-small a:visited,
    .trolly li.only-on-small a:active,
    .trolly li.only-on-small a:focus {
        font-size: 24px;
        font-size: 1.5em;
        padding-left: 1em;
        float: left;
    }
    a.tr-button:hover {
        color: #fff;
    }
    /* Abstand des Close-Buttons nach unten verringern */
    .trolly .tr-affected li:first-child {
        padding-bottom: 1.5em;
        line-height: 0;
    }
}


/* Close Button */

@media screen and (min-width: 50em) {
    .only-on-small {
        display: none !important;
    }
}


/* Content */

header .navigation, main #content {
    max-width: 1440px;
    max-width: 90rem;
    margin: 0 auto;
}

/* Abstaende nach rechts und Links anpassen */
@media screen and (min-width: 50em) {
main .content {
    padding-left: 2rem;
    padding-right: 2rem;
       
}
}
main .logo {
    padding-right: 2rem;
}

main a:link,
main a:visited,
main a:focus,
main a:active {
    text-decoration: underline;
}
@media screen and (min-width: 50em) {
main a:link,
main a:visited,
main a:focus,
main a:active {
    text-decoration: none;
}
}

main ul {
    margin: 0 0 0 1em;
    padding: 0;
}

main ul li {
    line-height: 1.6;
}

@media screen and (min-width: 50em) {
    main ul li {
        line-height: 1.7;
    }
}

main ul li:before {}


/* Profil */

.profil .profil-bild {
    border-top: 1px solid rgb(36, 153, 69);
    border-bottom: 1px solid rgb(36, 153, 69);
}

.profil .profil-bild p {
    margin: 0;
}

.profil img.profil-img {
    width: 145px;
    max-width: 145px;
    height: auto;
    margin-right: 1em;
}

.profil .table-container {
    max-width: 100%;
    overflow: visible;
}

.profil table {
    border-collapse: collapse;
    table-layout: fixed;
}

.profil table td {
    border-top: 1px solid rgb(36, 153, 69);
    vertical-align: top;
    padding: 0.2em 0 0.2em 0.3em;
}

.profil table tr:last-child td {
    border-bottom: 1px solid rgb(36, 153, 69);
}

.profil table .td-20 {
    width: 20%;
}
/* Profil auf Smartphone */
@media screen and (min-width: 23em) {
    .profil .profil-bild {
     display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-shrink: 0/* damit das Bild im IE nicht verzerrt */
}
}
@media screen and (max-width: 22.9375em) {
.profil .profil-bild {
    display: block;
    text-align: center;
}
.profil .profil-bild p {
        text-align: left;
    }
}


/* Referenzen */

.referenzen h2 {
    margin-bottom: 0;
}

.referenzen ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.referenzen a:link,
.referenzen a:visited,
.referenzen a:focus,
.referenzen a:active {
    text-decoration: none;
}

.referenzen a:hover {
    text-decoration: underline;
}
/* Referenzen Bilder */
figure {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 2em;
    max-width: 600px;
}
/*Fussbereich */


/* Linie ueberhalb mit Ausschalten des paddings */

footer .footer-nav .footer-wrapper {
    border-top: 1px solid;
    color: rgb(211, 211, 211);
    padding: 1em 0;
    margin: 0;
}


/* Abstaende nach rechts und links, damit buendig zum Text */
footer .footer-nav {
   padding-left: 2rem;
    padding-right: 2rem;
}


footer ul.footer-menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

footer ul.footer-menu li:first-child {
    padding-left: 0;
    border-left: none;
}

footer ul.footer-menu li:last-child {
    padding-right: 0;
}

footer ul.footer-menu li {
    padding-left: 0.5em;
    padding-right: 0.5em;
    border-left: 1px solid;
    color: rgb(211, 211, 211);
}

@media screen and (min-width: 50em) {
    footer ul.footer-menu li {
        padding-left: 1em;
        padding-right: 1em;
    }
    
    
    
}

footer ul.footer-menu li a,
footer .totop a {
    color: rgb(180, 180, 180);
    text-decoration: none;
}

footer ul.footer-menu li a:hover,
footer .totop a:hover {
    color: rgb(36, 153, 69);
}

footer .totop a:hover {
    text-decoration: none;
}

footer ul.footer-menu li a.active {
    text-decoration: underline;
}

footer .totop {
    text-transform: uppercase;
}

footer .totop .arrowtop {
    position: relative;
    top: -2px;
}

footer a.active {
    text-decoration: underline;
}



.col-sm-4 {
    width: 50%;
    float: left;
      position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-bottom: 5px;

}

img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

@media screen and (max-width: 50em) {

    
    .col-sm-4 {
    width: 50%;
    float: left;
      position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-bottom: 5px;

}
    
}
@media screen and (max-width: 28em) {

    
    .col-sm-4 {
    width: 100%;
    
      position: relative;
    min-height: 1px;
    padding-right: 0px;
display: block!important;
}
.profil-bild  {
    -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}
    
}