/* Mobile First */

/* General */
html {
  margin: 0;
  padding: 0;
  height:100vh;
}

body {
  font-size:16px;  /* 1 rem */
  height:100vh;
  color:#000;
  font-family: "Helvetica Neue", arial, sans-serif;
  line-height:1rem;
  margin: 0;
  padding: 0;
  min-width:350px;
  background: #A5A6A8;
  
  display: flex;
  align-items: center; 
  justify-content: center;
  flex-direction: column;
  display: flex;
}
a,
a:hover {
  text-decoration:none;
  font-style:normal;
  color: #000;
}
div {
  height:100%;
}
.pfeil {
  height:1rem;
  float:right;
}

.center-vertical,
.center-horizontal,
.center-box,
.stretch-wrapper {
  height:100%;
}

.spacer {
  display:none;
}

/* Title and Content */
div.title {
  background: #A5A6A8;
  color: #000;
  padding:10px;
  height:auto;
}

div.logo {
  background-image: url("img/LeKompakt.svg");
  background-repeat: no-repeat;
  background-size: cover;
  height:auto;
  padding-bottom:43%;
}
div.logo:hover {
  background-image: url("img/LeKompakt_reflected.svg");
}
/* Different styles */
body.style1 div.title,
body.style1 div.titlespacer {
  background: #D97766;
}
body.style2 div.title,
body.style2 div.titlespacer {
  background: #C59F7C;
}
body.style3 div.title,
body.style3 div.titlespacer {
  background: #B67C9D;
}

div.titlespacer {
  height:3px;
}


/* content */
div.huge {
  height:100%;
}
div.stretch-wrapper {
  display:flex;
  flex-direction: row;
}
div.content-wrapper {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  flex-grow:1;
  align-self:center;
  height:auto;
}
div.content {
  display: flex;
  flex-direction: column;
}
div.content1 {
  justify-content: flex-start; 
  align-self:flex-start;
  background: #fff;
  color: #000;
  padding-left:10px;
}
div.content1 div.first {
  padding-top:10px;
}
div.content1 div.last {
  padding-bottom:10px;
}
div.content2 {
  align-items: flex-end;
  background: #000;
  color: #fff;
  align-content: flex-end;
  align-self:flex-end;
  padding-right:10px;
}
div.content2 div.first {
  flex-grow:1;
}
div.content2 div.last {
  padding-bottom:15px;
}
div.content2 a {
  color: #fff;
}


/* Text Grid */
/* content1 */
.position {
  display: grid;
  grid-auto-columns: 1fr;
  height: auto;
  width: 100%;
}
.position1 {
  grid-template-columns: 1fr 4fr 1fr;
}
.position2 {
  grid-template-columns: 4fr 2fr;
}
.position2 div:first-child {
  display:none;
}
.position3 {
  grid-template-columns: 1fr 4fr 1fr;
}
.position4 {
  grid-template-columns: 2fr 4fr;
}
.position5 {
  grid-template-columns: 3fr 3fr;
}
.position6 {
  grid-template-columns: 4fr 2fr;
}
.position6 div:first-child {
  display:none;
}
.position7 {
  grid-template-columns: 2fr 4fr;
}
.position8 {
  grid-template-columns: 4fr 2fr;
}
.position8 div:first-child {
  display:none;
}
.position9 {
  grid-template-columns: 2fr 3fr 1fr;
}
.position10 {
  grid-template-columns: 1fr 4fr 1fr;
}
/* content2 */
.position11 {
  grid-template-columns: 4fr 2fr;
  text-align:right;
}
.position12 {
  grid-template-columns: 2fr 3fr 1fr;
  text-align:right;
}
.position13 {
  grid-template-columns: 2fr 4fr;
  text-align:right;
}
/* more positions in positions.css */


/* ANIMATIONS */
.flip:hover {
  display: inline-block;
  transform: scale(-1, 1);
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}




/* --- MEDIA BREAKPOINTS --- */
/* Smartphone wide */
@media screen and (max-width: 767px) and (min-width: 544px) {
  body {
    font-size:18px;
  }
  div.content,
  div.content2 {
    font-size:18px;
    line-height:18px;
  }
  .pfeil {
    height:18px;
  }
  div.title {
    padding:20px;
    padding-top:10px;
    padding-bottom:14px;
  }
  div.content1 {
    padding-left:20px;
  }
  div.content1 div.first {
    padding-top:14px;
  }
  div.content1 div.last {
    padding-bottom:14px;
  }
  div.content2 {
    padding-right:20px;
  }
  div.content2 div.last {
    padding-bottom:20px;
  }
  
}



/* Tablet Portrait */
@media screen and (max-width: 991px) and (min-width: 768px) {
  body {
    font-size:22px;
  }
  div.content,
  div.content2 {
    font-size:22px;
    line-height:22px;
  }
  .pfeil {
    height:22px;
  }
  div.title {
    padding:20px;
  }
  div.content1 {
    padding-left:20px;
  }
  div.content1 div.first {
    padding-top:20px;
  }
  div.content1 div.last {
    padding-bottom:20px;
  }
  div.content2 {
    padding-right:30px;
  }
  div.content2 div.last {
    padding-bottom:20px;
  }
}


/**************************************/
/* New Header and Layout starts here */
/************************************/
/* Tablet wide */
@media screen and (max-width: 1149px) and (min-width: 992px) {
  body {
    font-size:22px;
  }
  div.logo {
    background-image:url("img/LeKollektiv.svg");
    padding-bottom: 11%;
  }
  div.logo:hover {
    background-image:url("img/LeKollektiv_reflected.svg");
  }
  
  div.spacer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  div.white {
    background:#fff;
  }
  div.black {
    background: #000;
  }
  
  div.content,
  div.content2 {
    font-size:22px;
    line-height:22px;
  }
  .pfeil {
    height:22px;
  }
  div.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  div.center-box {
    display:flex;
    flex-direction: column;
  }
  div.title {
    flex-grow:0;
    align-self:auto;
  }
  div.content-wrapper {
     flex-grow:1;
  }
  div.title {
    padding:20px;
  }
  div.content1 {
    padding-left:20px;
  }
  div.content1 div.first {
    padding-top:15px;
  }
  div.content1 div.last {
    padding-bottom:15px;
  }
  div.content2 {
    padding-right:20px;
  }
  div.content2 div.last {
    padding-bottom:15px;
  }
}



/* Desktop */
@media screen and (min-width: 1150px) {
  body {
    font-size:30px;
  }
  div.logo {
    background-image:url("img/LeKollektiv.svg");
    padding-bottom: 11%;
  }
  div.logo:hover {
    background-image:url("img/LeKollektiv_reflected.svg");
  }
  
  div.spacer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  div.white {
    background:#fff;
  }
  div.black {
    background: #000;
  }
  
  div.content,
  div.content2 {
    font-size:30px;
    line-height:30px;
  }
  .pfeil {
    height:30px;
  }
  div.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height:auto;
  }
  div.center-box {
    display:flex;
    flex-direction: column;
  }
  div.title {
    flex-grow:0;
    align-self:auto;
  }
  div.content-wrapper {
     flex-grow:1;
  }
  div.title {
   padding:20px;
   padding-top:14px;
   padding-bottom:14px;
  }
  div.content1 {
    padding-left:20px;
  }
  div.content1 div.first {
    padding-top:14px;
  }
  div.content1 div.last {
    padding-bottom:14px;
  }
  div.content2 {
    padding-right:20px;
  }
  div.content2 div.last {
    padding-bottom:14px;
  }
  
  
  
  /* Mac Laptop */
  @media screen and (max-width: 1680px) {
    body {
      font-size:25px;
    }
    div.content,
    div.content2 {
      font-size:25px;
      line-height:25px;
    }
   .pfeil {
      height:25px;
    }
  }
}


/* Desktop huge */

@media screen and (min-width: 1921px) and (min-height: 1260px){
  div.content-wrapper {
    min-height: 100%;
  }
  .huge {
    max-width:1920px;
  }
   
   /*Center Center*/
  div.center-vertical {
    display:flex;
    flex-direction: column;
    justify-content: center;  
    height:100%;
  }
  div.center-horizontal {
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-self:center; 
  }
  div.center-box {
    align-self:center;
    margin-top:-7%;
  }
  .center-vertical,
  .center-horizontal,
  .center-box,
  .stretch-wrapper {
      height:auto;
  }
  div.title {
    padding:20px;
  }
  div.content1 {
    padding-left:30px;
  }
  div.content1 div.first {
    padding-top:30px;
  }
  div.content1 div.last {
    padding-bottom:30px;
  }
  div.content2 {
    padding-right:30px;
  }
  div.content2 div.last {
    padding-bottom:30px;
  }
}