/* Schriften einbinden */

@import url('cookieconsent.min.css');
@import url('fonts.css');
html,
body {
    height: 100%;
}

body {
    font-family: 'Brandon Text Regular', sans-serif;
    font-weight: 400;
    color: #5A5E55;
    font-size: 100%;
}

.grid-container {
    max-width: 1260px;
}

header {
    background: #BC552C;
    padding: 1em 0;
}

header .logo {
    font-family: 'Brandon Text Light', sans-serif;
    color: #fff;
    text-transform: uppercase;
    font-size: 48px;
    float: right;
}

.portrait {
    box-shadow: 10px 10px 100px silver;
    margin-bottom: 20px;
}
.startportrait {
    width: 500px;
    padding-top: 50px;
}
/* Abstand zwischen Topnavigation und Logo */
header .logo-header {
    margin-top: 1.5em;
}


/* Topmenu */

header ul.top-menu {
    color: #fff;
    list-style: none;
    font-size: 13px;
    margin: 0;
    padding: 0;
}

header ul.top-menu li {
    padding: 0 .5em;
    display: inline;
    padding: 0 .5em;
    border-right: 1px solid;
}

header ul.top-menu li:last-of-type {
    border-right: none;
    padding-right: 0;
}

header ul.top-menu li:first-of-type {
    padding-left: 0;
}

header ul.top-menu li a {
    color: #fff;
    text-decoration: none;
}

header ul.top-menu li a:hover,
header ul.top-menu li a.active {
    border-bottom: 2px solid;
    padding-bottom: 2px;
}

.philosophie header ul.main-menu li a.philosophie,
.kontakt header ul.main-menu li a.kontakt,
.profil header ul.main-menu li a.profil,
.datenschutz header ul.main-menu li a.datenschutz,
.impressum header ul.main-menu li a.impressum

 {
    border-bottom: 2px solid;
    padding-bottom: 2px;
}

/* Hauptmenu */

header ul.main-menu {
    color: #fff;
    font-size: 18px;
    list-style: none;
    margin: 0 0 .7em 0;
    padding: 0;
}

header ul.main-menu li {
    display: inline;
    padding: 0 .8em;
}

header ul.main-menu li:last-of-type {
    padding-right: 0;
}

header ul.main-menu li:first-of-type {
    padding-left: 0;
}

header ul.main-menu li a {
    color: #fff;
}

header ul.main-menu li a:hover,
header ul.main-menu li a.active {
    border-bottom: 2px solid;
    padding-bottom: 2px;
}

/* OffCanvas und Toggle */

.off-canvas ul.menu {
    padding: 4em 0 0 1em;
}

.off-canvas ul.menu li {
    padding: .5em 1em 0 1em;
    font-size: 18px;
}
.off-canvas ul.menu li a {
    border-bottom: 1px solid;
    padding-bottom: 1em;
}

.off-canvas ul.menu a:hover {
    color: #BC552C;
}

.off-canvas .close-button {
    padding: 1em 1em 0 0;
    font-size: 30px;
}
.off-canvas .close-button:hover {
   color: #BC552C;
}

header .menu-icon {
    margin-bottom: 15px;
}

/* Content */

.content {
    padding: 4em 1em 1em 2.5em;
    font-size: 18px;
    line-height: 1.4;

}

@media screen and (min-width: 64em) {
    .content {
        max-width: 630px;
    }
}

.content h1 {
    font-family: 'Brandon Grotesque Black', sans-serif;
    font-weight: 500;
    font-size: 28px;
    color: #BC552C;
    font-style: normal;
    margin: 0 0 1.5em 0;
    text-transform: uppercase;
    position: relative;
}

span.kleiner {
    font-size: 45px!important;
    float: left; 
    margin: 0 auto;
    width: 100%;
}

.content a {
    border-bottom: 1px solid;
    padding-bottom: 1px;
}
.content a:hover {
    border-bottom: none;
}

/* Ueberschrift Profil wegen Unterueberschrift */

.profil .content h1 {
    margin-bottom: 0;
}

/* Ueberschrift Impressum */

.content h1.impressum {
    margin-bottom: 0.5em;
    margin-top: 2em;
}


.content h2 {
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 2em;
}

.content h3 {
    font-family: 'Brandon Grotesque Black', sans-serif;
    font-size: 18px;
    text-transform: uppercase;
    margin-bottom: 1em;
}

/* Bilder */

.gallery img {
    width: 100%;
}

/* Versalien */

.versalien {
    text-transform: uppercase;
}

/* no wrap */

.nowrap {
    white-space: nowrap;
}

/* Startseite */

.start main {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60%;
}

.start {
    background: #BC552C;
}

.start .logo-start {
    font-family: 'Brandon Text Light', sans-serif;
    color: #fff;
    font-size: 100px;
    text-transform: uppercase;

}

.start .arrow {
    padding-top: 2em;
}

.start .arrow a {
    color: #fff;
    font-size: 20px;
}


/* medium */

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    header .logo {
        font-size: 38px;
        float: left;
    }

    .content {
        padding: 2em 3em;
        font-size: 16px;
        line-height: 1.3;
    }

    .content h1 {
        font-size: 24px;
        margin: 1.5em 0 .5em 0;
    }
    .gallery img.bild_large {
        display: none;
    }
}

/* small */

@media screen and (max-width: 39.9375em) {
    header .logo {
        font-size: 32px;
        float: left;
    }
    .content {
        padding: 1em;
        font-size: 16px;
        line-height: 1.2;
    }

    .content h1 {
        font-size: 24px;
        margin: 1.5em 0 .5em 0;
    }
    .content h2 {
        font-size: 16px;
    }
    .content h3 {
      font-size: 16px;
}
    .start .logo-start {
        font-size: 38px;
    }
    .gallery img.bild_large {
        display: none;
    }
}

/* Schriftgroessen anpassen */

@media screen and (min-width: 40em) and (max-width: 72.9375em) {
    header .logo {
        font-size: 40px;
    }
    .start .logo-start {
        font-size: 72px;
    }
    
    span.kleiner {
    font-size: 33px !important;
    float: left;
    margin: 0 auto;
    width: 100%;
}
    
}

@media screen and (min-width: 40em) and (max-width: 63.9375em) {
    header .logo {
        font-size: 40px;
    }
    .start .logo-start {
        font-size: 54px;
    }
    
    span.kleiner {
    font-size: 27px !important;
    float: left;
    margin: 0 auto;
    width: 100%;
}
}

@media screen and (max-width: 30em) {
    header .logo {
        font-size: 20px;
    }
    .start .logo-start {
        font-size: 26px;
    }
    header .menu-icon {
        margin-bottom: 10px;
    }
    
    span.kleiner {
    font-size: 20px!important;
    float: left;
    margin: 0 auto;
    width: 100%;
}
}

@media screen and (max-width: 639px) {
    
        span.kleiner {
    font-size: 20px!important;
    float: left;
    margin: 0 auto;
    width: 100%;
}
}

@media screen and (max-width: 480px) {
span.kleiner {
    font-size: 14px !important;
    float: left;
    margin: 0 auto;
    width: 100%;
}
}

/* Bilder anpassen */

@media screen and (min-width: 64em) {
    .gallery img.bild_small {
        display: none;
    }
}