/* CUSTOM STYLES - NOT GLOBAL FRAMEWORK */

/* Custom Colors */
:root {
  --gruen: #A3D20B;
  --hellgruen: #BCD82F;

  --gc: 100% - (100% / 1.618);
}

/*.news--container .news--item {display: grid;grid-template-columns:minmax(150px, 25%) 1fr;column-gap:3rem;}
.news--container .news--item picture {grid-column:1;}
.news--container .news--item picture img {width: 100%;height:auto;margin-bottom: 10px;}
.news--container .news--item .news--content {grid-column:2; }
.news--container .news--item .news--content img {max-width:90%;width:100%;height:auto;margin: 10px 0;}

@media (min-width:1024px) {
  .news--container .news--item .news--content {columns: 2;column-gap:3rem}
}*/
.grid-2-col {grid-gap: 6rem 1rem;}

main {scroll-behavior: smooth}
main section:nth-of-type(1) {padding-top: 0;}
.title-large {font-family: proxima-nova;font-weight: 800;font-size: 5rem;text-align: left;line-height: 1;text-transform: uppercase;max-width: 800px;margin: 2rem 0;}
.title-large span {color: var(--gruen);display: block;}
.hero .title-large span {color: var(--hellgruen);}
.title {font-size: 2.5rem;color:var(--gruen);line-height: 1;font-weight: 800;max-width:25ch;text-transform: uppercase;}
.title + p {margin: 10vw 0 7vw;width:100%;max-width:60ch;}
.full-width .title {color:#000;padding-top: 20px;}
.full-width .container {    
    min-height: 80px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;}
.content--small {width:100%;max-width:120ch;margin:0 auto;}
.hero {    height: 38vw;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 460px;
    max-height: 620vh;}
.hero .content--small {max-width:90ch;}

.werte-grid .grid {grid-gap: 1rem;}
.werte-item {perspective: 1500px;transition: all 0.5s ease 0s;}
.werte-item:hover .rotate {transform: rotateY( 180deg);}
.werte-item .rotate {transform-style: preserve-3d;transition: transform 0.4s ease 0s;animation: giro 1s 1;position: relative; height:100%;}
.werte-item .rotate .front {background: var(--gruen);padding: 30px 20px 20px;display: flex;flex-flow:column;justify-content: space-between; border:1px solid #fff;padding: 30px;
    position: absolute;
    top: 0;
    width: 100%; height:100%;}
.werte-item .rotate .front, .werte-item .rotate .back {backface-visibility: hidden;box-sizing: border-box;-webkit-perspective: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    visibility:visible;
    backface-visibility: hidden;}
.werte-item .rotate .back {transform: rotateY( 180deg);border:1px solid #000;padding: 30px;height:100%;display: flex;flex-flow: column;justify-content: space-between;background: #fff;}
h3, .werte-item h3 {font-size: 2rem;color:#000;line-height: 1;font-weight: 800;text-transform: uppercase;margin: 0;}
.werte-item h3 span {display: block;color:#fff;}
h3 span, .werte-item .back h3 span {display: block;color:var(--gruen);margin-bottom: 30px;}
.werte-item .icon {    display: inline-block;
    width: auto;
    max-width: 220px;
    align-self: flex-end;}

@keyframes giro {
  from {
    transform: rotateY( 180deg);
  }
  to {
    transform: rotateY( 0deg);
  }
}

/* NEWS */
.news {margin-top: 50px;display: flex;flex-flow:column;gap:50px;}
.news__item {    display: grid;
    grid-template-columns: var(--gc) 1fr;
    gap: 20px;}
.news .news__item img {    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    grid-row: span 3;}
.news__item h3, .news__item p, .news__item a {grid-column:2;margin: 0;}
.news__item p {overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;}

/* CARDS */
.card {padding: 0;}
.card img {margin-bottom: 50px;}
.card h3 {width:95%;}
.card .name {font-size: 1rem;font-weight: 800;display: block;margin-bottom: 30px;text-transform: uppercase;}

.team--cards {display: flex;gap:30px;margin-top: 15vw;flex-flow:wrap;justify-content: flex-end}
.team--cards .card {display: flex;width:80%;gap:30px;}
.team--cards .card img {max-width:200px;align-self:flex-start;}

.picture {margin-bottom: 2rem;}
.picture + p {margin: 30px 0 100px;
    width: 100%;
    max-width: 60ch;}

.button {
    padding: 10px 0;
    background: none;
    color: var(--gruen);
    text-transform: uppercase;
    border-radius: 0;
    text-decoration: none;
    min-width: 1px;
    display: inline-block;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: left;
}
/* Navigation */
.links {
    font-size: 2em;
    font-weight: 300;
    width:38%;
}
.links > a {
    color: #000;
    padding: 0 .75em;
    text-align: center;
    text-decoration: none;
    transition: all .5s;
}
.links > a:hover {
    background: #ffffff06;
    color: var(--gruen);
}
.links > .line {
    background: var(--gruen);
    height: 1px;
    pointer-events: none;
}

/* The Magic */
#header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}
.links {
    display: grid;
    grid-template-columns: repeat(var(--items), 1fr);
    position: relative;
}
.links > .line {
    opacity: 0;
    transition: all .5s;
    position: absolute;
    bottom: 0;
    left: var(--left, calc(100% / var(--items) * (var(--index) - 1)));
    width: var(--width, calc(100% / var(--items)));
    --index: 0;
}
.links > a:hover ~ .line {
    opacity: 1;
}

.links > a:nth-of-type(1):hover ~ .line { --index: 1; }
.links > a:nth-of-type(2):hover ~ .line { --index: 2; }
.links > a:nth-of-type(3):hover ~ .line { --index: 3; }
.links > a:nth-of-type(4):hover ~ .line { --index: 4; }
.links > a:nth-of-type(5):hover ~ .line { --index: 5; }
.links > a:nth-of-type(6):hover ~ .line { --index: 6; }
.links > a:nth-of-type(7):hover ~ .line { --index: 7; }
.links > a:nth-of-type(8):hover ~ .line { --index: 8; }
.links > a:nth-of-type(9):hover ~ .line { --index: 9; }
.links > a:nth-of-type(10):hover ~ .line { --index: 10; }
.links > a:last-of-type:hover ~ .line { --index: var(--items); }


.full-width {width:100vw;position: relative;left: 50%;right: 50%;margin-left: -50vw;margin-right: -50vw;background:var(--gruen);}

.container {position: relative;}
.style-type {display: inline-flex;background:var(--c-orange);color:#fff;border-radius:6px;justify-content: center;align-items:center;margin: 0 10px;padding: 5px 10px;font-size:0.8rem;position: absolute;opacity: 0;left: -100px;max-width:80px;margin-top:20px;text-decoration: none;text-transform: none;font-weight: normal;z-index: 5;}
.style-type::after {  
    content: '';
  display: block;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid var(--c-orange);
position: relative;right: -20px;}
.container:hover > * .style-type {opacity: 1;}
.banderole:hover > .style-type, .banderole:hover > * .style-type {opacity: 1;left: 10px;}

@media screen and (max-width:480px) { 
    .full-width .container {width:auto;}
    .top-bar {padding: 0;align-items: center;flex-flow: column;height:auto;}
    .top-bar .logo img {border-radius:0;top: 0;width: 100%;height: auto;left: 0;max-width:240px;margin-top: 20px;margin: 20px 0;}
    nav.links {width:auto;}
    h2 {font-size: 2rem;letter-spacing: 2px;margin-bottom: 2em;}
    .grid-12-col, .grid-2-col {display: flex;flex-flow: column;}
    .title-large {font-size: 2.5rem}
    .werte-item .rotate .back {padding: 15px;}
    .team--cards {justify-content: center;gap:40px;}
    .team--cards .card {width:auto;flex-flow:column;}
}