@charset "UTF-8";
/* CSS Document */

/**
 * Theme Name:     KRAFFT STIFTUNG
 * Theme URI:      https://krafft-stiftung.de/
 * Description:    Theme der ersten Generation für KRAFFT STIFTUNG
 * Author:         Der Hersteller
 * Author URI:     https://www.der-hersteller.de
 * Version:        1.0
 */




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * GLOBALS                                                                       *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
html {
	height: 100%;
}
body {
	font: 62.5%/1.5em 'asapregular', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    color: rgb(23,41,131);
}

a {
	transition: 0.5s ease-in-out; 
}
a, a:active, a:link, a:visited {
    color: inherit;
    text-decoration: none;
}

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

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

.mobile-only {display: none !important}
.nowrap {white-space: nowrap;}
.uppercase {text-transform: uppercase;}

.background-cover {
	background-position: center center;
  	background-repeat: no-repeat;
  	background-size: cover;
}
.multiply {
	mix-blend-mode: multiply;
}
.shadow {
	box-shadow: 3px 3px 2px rgba(0,0,0,0.5);
}

.scale:hover,
.scale:focus {
    transform: scale(.95);
}

.box-sizing {
	box-sizing: border-box;
}
.hyphens {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}
.flex {
	display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}
.stretch {
	align-self: stretch;
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * TYPOSATZ                                                                      *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 0;
	padding: 0;
}

h1 {
    font-family: 'asap_condensedsemibold';
    font-size: 3.6em;
    line-height: 1.3em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75em;
}
.studie-single h1 {
    text-transform: none;
}
h2 {
    font-family: 'asapmedium';
    text-transform: uppercase;
    font-size: 2.5em;
    line-height: 1.6em;
}
#main p + h2,
#main ul + h2 {
    margin-top: 2.6em;
}
.stiftung-daten h2,
#main .stiftung-daten .item:nth-child(3) p {
    font-family: 'asap_condensedsemibold';
    font-size: 3.6em;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
footer h2 {
    font-size: 2em;
}
h3 {
    font-family: 'asapmedium';
    text-transform: uppercase;
    font-size: 1.95em;
    line-height: 1.8em;
    color: rgb(226,0,122);
}
#project-slider h3,
#projects h3,
#partner-list h3 {
    color: rgb(23,41,131);
}
#partner-list h3 {
    text-transform: none;
}
#main h2 + h3 {
    margin-top: 1.8em;
}
#main p + h3,
#main ul + h3 {
    margin-top: 2.4em;
}
h4 {	
}
h5 {	
}
p, #main ul, #main ol {
    margin: 0;
}
#main p, #main ul, #main ol {
    font-size: 1.95em;
    line-height: 1.8em;
    margin-bottom: 1.5em;
}
#main ul, #main ol {
	list-style: none;
	padding: 0 0 0 0;
}
#main ul li {
	padding-left: 1em;
    position: relative;
}
#main ul li:before {
	content: " • ";
	position: absolute;
	left: 0;
    top: 0;
	font-size: 1.2em;
}
#main .stiftung-daten p {
    margin-bottom: 0;
}
#main .stiftung-daten .item:nth-child(2) p {
    line-height: 1.4em;
    text-indent: 1.4em;
    background-repeat: no-repeat;
    background-image: url("images/icon-arrow.svg");
    background-size: 0.9em;
    background-position: left 0.2em;
}
#main .stiftung-daten .item:nth-child(1) p {
    font-family: 'asap_condensedsemibold';
    font-size: 7.3em;
    line-height: 1.3em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#main .stiftung-daten .item:nth-child(3) p span {
    display: block;
    font-family: 'asap_condensedsemibold';
    font-size: 2em;
    line-height: 1.3em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#main #projects .post .left .project-header p {
    font-size: 3.4em;
    line-height: 1.65em;
    margin-bottom: 0;
}
#main #projects .post .left .project-content p,
#main #partner-list .post p {
    margin-bottom: 1.2em;
}
.spenden #main .image-banner p {
    font-family: 'asapmedium';
    font-size: 4.7em;
    line-height: 1.2em;
    text-transform: uppercase;
    color: rgb(255,255,255);
    margin-bottom: 0;
}
.spenden #main .image-banner p br {
    display: none;
}
#main .bg-single .inside .inner p:first-child {
    font-family: 'asapmedium';
    text-transform: uppercase;
    color: rgb(226,0,122);
    margin-bottom: 0.6em;
}
.fokus #main ul li {
	padding-left: 0;
}
.fokus #main ul li:before {
	content: "";
}
#main ol li {
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: left 0.15em;
    padding-left: 2.2em;
    margin-bottom: 2em;
}
#main ol li:nth-child(1) {
    background-image: url("images/ol-1.svg");
}
#main ol li:nth-child(2) {
    background-image: url("images/ol-2.svg");
}
#main ol li:nth-child(3) {
    background-image: url("images/ol-3.svg");
}

#footer p {
    font-size: 1.7em;
    line-height: 2em;
}
#footer .footer-left .column:nth-child(2) p {
    font-family: 'asapmedium';
    font-size: 2em;
    line-height: 1.7em;
    text-transform: uppercase;
}
#footer .footer-left .column:nth-child(2) p.arrow-link {
    text-transform: none;
}
#footer .footer-right p {
    font-size: 2em;
    line-height: 1.7em;
}

i, em {
	font-style: normal;
    color: rgb(226,0,122);
}
b, strong {
    font-family: 'asapmedium';
	font-weight: normal;
}
.color-pink {
    color: rgb(226,0,122);
}
hr {
    font-size: 1.95em;
    line-height: 1.8em;
    border: none;
    border-bottom: 3px dotted rgb(23,41,131);
    width: 11.2em;
    margin: 1em 0;
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * CONTAINER                                                                     *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}
.inside {
    position: relative;
    margin: 0 auto;
    width: 142em;
    box-sizing: border-box;
}
.inner {
    width: 104em;
}

/* sections */
section {
    padding: 5.4em 0 3em 0;
}
.start section:last-child,
.fokus section:last-child,
.studien section:last-child {
    padding-bottom: 9.4em;
}
.stiftung section:last-child,
.spenden section:nth-child(2) {
    padding-bottom: 0;
}
section.bg-single {
    padding-top: 16em;
}
.bg-blue {
    background: rgba(23,41,131,0.17);
}
.bg-orange {
    background: rgba(248,180,60,0.17);
}

/* flex-content */
.flex-content {
    display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.flex-content.was-wir-tun {
    align-items: center;
    margin-top: 9.4em;
}
.flex-content.was-wir-tun .left {
    width: 35.38461538461539%; /* 368/1040 */
}
.flex-content.was-wir-tun .right {
    width: 57.30769230769231%; /* 596/1040 */
}
.organe {
    margin-top: 4em;
}
.organe .flex-content .left,
.organe .flex-content .right {
    width: 45%;
}
.flex-content.stiftung-daten {
    margin: 0 auto;
    width: 105em;
    margin-top: 6.8em;
    margin-bottom: 13.6em;
}
.flex-content.stiftung-daten .item {
    width: 29.904761904761905%; /* 314/1050 */
    border-top: 3.4em solid;
    border-bottom: 0.6em solid;
    padding: 3.2em 0 0.9em 0;
    align-self: stretch;
}
.flex-content.stiftung-daten .item:nth-child(1) {
    border-color: rgb(226,0,122);
}
.flex-content.stiftung-daten .item:nth-child(2) {
    border-color: rgb(0,102,153);
}
.flex-content.stiftung-daten .item:nth-child(3) {
    border-color: rgb(248,186,60);
}
.flex-content.stiftung-daten .item:nth-child(2) p,
.flex-content.stiftung-daten .item:nth-child(3) p {
    transition: 0.5s ease-in-out;
}
.flex-content.stiftung-daten .item:nth-child(2) p:hover,
.flex-content.stiftung-daten .item:nth-child(2) p:focus {
    margin-left: 0.5em;
}
.flex-content.stiftung-daten .item:nth-child(3) p:hover,
.flex-content.stiftung-daten .item:nth-child(3) p:focus {
    transform: scale(.95);
}

/* image-banner */
.image-banner {
    background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}
.foerderung .image-banner {
    height: 43.2em;
    margin-top: 4em;
    margin-bottom: 5.4em;
}
.stiftung .image-banner {
    height: 30.4em;
    margin-top: 4em;
}
.spenden .image-banner {
    margin-top: 4em;
}
.spenden .image-banner .inside {
    display: flex;
    flex-direction: column;
	justify-content: center;
	align-items: flex-end;
    height: 41.5em;
}

/* farbraster */
#projects .post.orange {
    border-color: rgb(250,192,92);
}
#projects .post.pink {
    border-color: rgb(245,183,212);
}
#projects .post.blue {
    border-color: rgb(208,237,251);
}
#projects .post.yellow {
    border-color: rgb(241,238,153);
}
#projects .post.darkblue {
    border-color: rgb(190,196,229);
}
#projects .post.grey {
    border-color: rgb(208,208,208);
}

#projects .post.orange .left,
#project-slider .slide.orange,
.bg-single.orange {
    background: rgb(250,192,92);
}
#projects .post.pink .left,
#project-slider .slide.pink,
.bg-single.pink {
    background: rgb(245,183,212);
}
#projects .post.blue .left,
#project-slider .slide.blue,
.bg-single.blue {
    background: rgb(208,237,251);
}
#projects .post.yellow .left,
#project-slider .slide.yellow,
.bg-single.yellow {
    background: rgb(241,238,153);
}
#projects .post.darkblue .left,
#project-slider .slide.darkblue,
.bg-single.darkblue {
    background: rgb(190,196,229);
}
#projects .post.grey .left,
#project-slider .slide.grey,
.bg-single.grey {
    background: rgb(208,208,208);
}



/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * HEADER                                                                        *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#header {
    display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.header-left,
.header-right {
    position: relative;
    height: 56em;
}
.header-left {
    width: 51.5625%; /* 990/1920 */
    background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}
.header-right {
    width: 48.4375%; /* 930/1920 */
    display: flex;
    flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.header-right .logo {
    width: 48.4em;
    margin-top: 1em;
}
.studie-single #header {
    justify-content: flex-end;
    background: rgb(255,255,255);
}
.studie-single .header-right {
    height: 11em;
}
.studie-single .header-right .logo {
    position: absolute;
    top: 17.2em;
    right: 50%;
    width: 40.4em;
    margin-right: -33.4em;
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * MAIN                                                                          *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#main {
}
#main a {
    font-family: 'asapmedium';
}
#main .stiftung-daten .item:nth-child(3) a {
    font-family: 'asap_condensedsemibold';
}
#main a:hover,
#main a:focus {
    text-decoration: underline;
}
#main #project-slider .slide p.more a:hover,
#main #project-slider .slide p.more a:focus,
.foerderung #main p.more a:hover,
.foerderung #main p.more a:focus,
#main .stiftung-daten a:hover,
#main .stiftung-daten a:focus,
#projects .post .left .project-content p.more a:hover,
#projects .post .left .project-content p.more a:focus,
#partner-list .post .left .info a:hover,
#partner-list .post .left .info a:focus,
#main .link-back a:hover,
#main .link-back a:focus {
    text-decoration: none;
}

/* buttons & links */
.btn-forschungsantrag {
    position: absolute;
    width: 23em;
    right: 0;
    transition: 0.5s ease-in-out;
}
.start .btn-forschungsantrag {
    top: 28%;
}
.foerderung .btn-forschungsantrag {
    top: 26%;
}
.btn-forschungsantrag:hover,
.btn-forschungsantrag:focus {
    transform: scale(.95);
}
.link-back {
    background-repeat: no-repeat;
    background-image: url("images/arrow-blue.svg");
    background-position: left 0.4em;
    background-size: 1.5em;
    padding-left: 2.2em;
    transition: 0.5s ease-in-out;
    margin-top: 2.6em;
}
.link-back:hover,
.link-back:focus {
    margin-left: 0.5em;
}

/* elements with circle arrow */
.block-arrow-indent,
.block-arrow-extend,
#project-slider .slide .slide-content,
.fokus #main ul li,
.foerderung #main p.more,
#projects .post .left .project-content h3,
#partner-list .post .left .info {
    background-repeat: no-repeat;
    background-image: url("images/icon-arrow.svg");
    background-size: 30px;
    padding-left: 4.4em;
}
.block-arrow-extend {
    margin-left: -4.4em;
}
.start .block-arrow-indent,
.partner .block-arrow-extend {
    background-position: left 0.5em;
}
.fokus #main ul li,
.foerderung #main p.more,
#project-slider .slide .slide-content,
#projects .post .left .project-content h3,
.spenden .block-arrow-extend,
#partner-list .post .left .info,
.stiftung .block-arrow-indent {
    background-position: left 0.15em;
}
.start .block-arrow-indent {
    margin: 6em 0;
}
.start .block-arrow-indent strong {
    color: rgb(226,0,122);
}
.fokus #main ul li,
.foerderung #main p.more,
#projects .post .left .project-content h3 {
    padding-left: 2.2em;
}
.fokus #main ul li {
    margin-bottom: 2em;
}
.foerderung #main p.more {
    transition: 0.5s ease-in-out;
}
.foerderung #main p.more:hover,
.foerderung #main p.more:focus {
    margin-left: 0.5em;
}
.foerderung #main p.more a {
    text-transform: uppercase;
    color: rgb(226,0,122);
}
#projects .post .left .project-content h3 {
    margin-left: -2.2em;
}

/* project-slider */
#project-slider {
    margin-left: -1.8em;
    margin-right: -1.8em;
}
#project-slider .slide {
    padding: 3em 2.5em;
    margin: 0 1.8em;
    box-sizing: border-box;
}
#project-slider .slide:nth-child(1n) {
    background-image: url("images/slide-bg-left.png");
    background-position: left 50%;
    background-repeat: no-repeat;
    background-size: 4em;
}
#project-slider .slide:nth-child(2n) {
    background-image: url("images/slide-bg-right.png");
    background-position: right 50%;
    background-repeat: no-repeat;
    background-size: 4em;
}
/*#project-slider .slide.orange,
#project-slider .slide.yellow,
#project-slider .slide.grey {
    background-image: url("images/slide-bg-left.png");
    background-position: left 50%;
    background-repeat: no-repeat;
    background-size: 4em;
}
#project-slider .slide.pink,
#project-slider .slide.darkblue,
#project-slider .slide.blue {
    background-image: url("images/slide-bg-right.png");
    background-position: right 50%;
    background-repeat: no-repeat;
    background-size: 4em;
}*/
#project-slider .slide .slide-header {
    margin-bottom: 4em;
}
#project-slider .slide .slide-content {
    background-position: left 0.4em;
    padding-right: 3.4em;
}
#main #project-slider .slide p {
    -webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
    margin-bottom: 0;
}
#main #project-slider .slide p.contact-person,
#main #project-slider .slide p.goal {
    margin-bottom: 0.8em;
}
#main #project-slider .slide p.more a,
#projects .post .left .project-content p.more a {
    text-transform: uppercase;
    text-decoration: underline;
}

/* projects */
#projects {}
#projects .post {
    display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
    border: 1em solid;
    margin-bottom: 7.7em;
    box-sizing: border-box;
}
#projects .post:last-child {
    margin-bottom: 0;
}
#projects .post .left {
    width: 71.42857142857143%; /* 1000/1400 */
    padding: 1.5em 3em 0.5em 6em;
    box-sizing: border-box;
}
#projects .post .left .project-header {
    margin-bottom: 2.6em;
}
#projects .post .left .project-content {
    
}
#projects .post .right {
    display: flex;
    flex-direction: column;
	justify-content: center;
	align-items: center;
    align-self: stretch;
    width: 28.57142857142857%; /* 400/1400 */
    padding: 3em;
    box-sizing: border-box;
}
#projects .post .right img {
    max-height: 18em;
    max-width: 28em;
}
#main p.single-margin {
    margin-top: -1.5em;
}

/* partner-list */
#partner-list {}
#partner-list .post {
    display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
    box-sizing: border-box;
    margin-bottom: 2em;
    padding-bottom: 1em;
    border-bottom: 3px dotted rgb(23,41,131);
}
#partner-list .post:last-child {
    border-bottom: none;
    margin-bottom: 4em;
}
#partner-list .post .left,
#partner-list .post .right {
    align-self: stretch;
    box-sizing: border-box;
}
#partner-list .post .left {
    width: 54%;
    padding-top: 1em;
}
#partner-list .post .left h3 + p.info {
    margin-top: 1.2em;
}
#partner-list .post .left .info {
    background-image: url("images/icon-plus.svg");
    padding-left: 2.2em;
    text-transform: uppercase;
    color: rgb(226,0,122);
    transition: 0.5s ease-in-out;
}
#partner-list .post .left .info:hover,
#partner-list .post .left .info:focus {
    margin-left: 0.5em;
}
#partner-list .post .right {
    display: flex;
    flex-direction: column;
	justify-content: center;
	align-items: center;
    width: 46%;
    padding: 2em 4em;
}
#partner-list .post .right img {
    max-height: 12em;
    max-width: 26em;
}





/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * FOOTER                                                                        *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#footer {
    margin-top: auto;
    padding: 5.2em 0;
    background: rgb(23,41,131);
    color: rgb(255,255,255);
}
#footer a:hover,
#footer a:focus {
    text-decoration: underline;
}
#footer .arrow-link a {
    display: block;
    background-repeat: no-repeat;
    background-position: left 0.35em;
    background-image: url("images/arrow-white.svg");
    background-size: 1.4em;
    padding-left: 2em;
}
#footer .arrow-link a:hover,
#footer .arrow-link a:focus{
    margin-left: 0.5em;
    text-decoration: none;
}
#footer .inside,
.footer-left {
    display: flex;
    flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}
.footer-left {
    width: 69.2em;
}
.footer-left .column {
    display: flex;
    flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
    height: 31em;
}
.footer-right {
    display: flex;
    flex-direction: column;
	justify-content: flex-start;
	align-items: flex-end;
	flex-wrap: wrap;
}
.footer-right .logo {
    width: 35em;
    margin-bottom: 3em;
}




/* ----------------------------------------------------------------------------- *
 *                                                                               *
 * NAVIGATION                                                                    *
 *                                                                               *
 * ----------------------------------------------------------------------------- */
#menu {
    display: flex;
    flex-direction: row;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
    position: absolute;
    top: 3.6em;
}
#menu ul {
}
#menu ul > li {
    display: inline-block;
}
#menu ul > li > a {
    font-size: 1.5em;
    text-transform: uppercase;
    border-bottom-width: 0.15em;
    border-bottom-style: solid;
    border-bottom-color: transparent;
}
#menu ul > li:before {
  	content: " • ";
	margin: 0 0.6em;
	font-size: 1.5em;
}
#menu ul > li:first-child:before {
  	content: "";
	margin: 0;
}
#menu ul > li > a:hover,
#menu ul > li > a:active,
#menu ul > li > a:focus,
#menu ul > li.current-menu-item > a,
#menu ul > li.current-page-ancestor > a {
    color: rgb(226,0,122);
}
#menu ul > li.current-menu-item > a,
#menu ul > li.current-page-ancestor > a {
    font-family: 'asapbold';
    border-bottom-color: rgb(226,0,122);
}
#menu .home-btn {
    margin-right: 2.2em;
}
#menu .home-btn a {
    display: block;
    width: 2.2em;
    background-repeat: no-repeat;
    background-image: url("images/icon-home.svg");
    background-size: 2.2em;
    padding-bottom: 2.2em;
}
#menu .home-btn a:hover,
#menu .home-btn a:focus,
.start #menu .home-btn a {
    background-image: url("images/icon-home-active.svg");
}
.start #menu .home-btn a {
    border-bottom: 0.2em solid rgb(226,0,122);
}

#sub-nav {
}
#sub-nav ul {
}
#sub-nav ul > li {
}
#sub-nav ul > li > a {
    font-family: 'asapmedium';
    font-size: 2em;
    line-height: 1.7em;
    text-transform: uppercase;
}
#sub-nav ul > li.current-menu-item > a {
    text-decoration: underline;
}

.open-nav,
.close-nav {
	display: none;
}
.open-nav {
    position: absolute;
    top: 3.6em;
    right: 3.6em;
}
.close-nav {
    margin-top: 4.2em;
    margin-right: 4.2em;
    margin-bottom: 6em;
}
.open-nav .toggle-button:hover,
.open-nav .toggle-button:active,
.open-nav .toggle-button:focus,
.close-nav .toggle-button:hover,
.close-nav .toggle-button:active,
.close-nav .toggle-button:focus {
    color: rgb(226,0,122);
}