/* Global variabels */
:root {
  /* #ffab40 */
  --navbar_bg_desktop: #ffad33;
  --navbar_bg_mobile: #ffad33;
  --link_color: white;
  --link_hover: black;
  --link_hover_mobile: red;
  --header_color: yellow;
  --detail_color: white;
  --text_color: black;
  --item1_bg : #1565c0; /* blue */
  --item2_bg : #546e7a; /* blue grey 600 */
  --item3_bg : #424242; /* grey */
  --item4_bg : #2e7d32; /* green */
  --item5_bg : #00695c; /* teal */
  --image_bg : #424242; /* grey 800 */
  --item1_bg_mobile: #37474f; /* blue grey */
  --item2_bg_mobile: #546e7a; /* blue grey */
  --header_font_mobile: 20px;
  --header_font_tablet: 20px;
  --header_font_desktop: 26px;
  --detail_font_mobile: 17px;
  --detail_font_tablet: 16px;
  --detail_font_desktop: 18px;
  --navbar_font_mobile: 15px;
  --link_button_color: #295ee5;
  --link_button_color_mobile: #295ee5;
  --button_color: #3385ff;
  --button_color_mobile: #3385ff;
  --button_bg: orange;
  --body_bg: white;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body, html{
  height:100%;
  margin:0;
  padding: 0;
  font-size:var(--detail_font_mobile);
  font-family:Arial, Alto;
  font-weight:400;
  line-height:1.3em;
  color:#666;
  background-color: var(--body_bg);
}

  .navbar {
    width: 100%;
    top:0;
    left:0;
    background-color: var(--navbar_bg_mobile);
    display: grid;
    grid-template-columns: 70px 60vw 28vw;
    grid-template-areas: 
      "logo logo-text menu-toggle-label"
      "links links links";
  }

  .logo {
    grid-area: logo;
    width: 70px;
    height: 50px;
    margin-left: -10px;
  }

  .logo img {
    width: 100%;
    height:50px;
  }

  .logo-text {
    grid-area: logo-text;
    width: 140px;
    height: 50px;
  }

  .logo-text text {
    color: white;
    vertical-align: top;
    text-align: left;
    line-height: 16px;
    font-weight: 500;
    font-size: var(--header_font_mobile);
    font-size: 16px;
  }

  .menu-toggle {
    grid-area: menu-toggle;
    height: 20px;
    width: 20px;
    margin-left: 0px;
    vertical-align: left;
    display: none;
  }

  .links ul {
    display: none;
  }

  .menu-toggle:checked ~ .links ul {
    display: block;
  }

/* Hamburger Menu */
  .menu-toggle-label {
    grid-area: menu-toggle-label;
    margin-left: 0px;
    display: flex;
    height: 80%;
    align-items: center;
  }

  .menu-toggle-label span,
  .menu-toggle-label span::before,
  .menu-toggle-label span::after {
    display: block;
    background: white;
    height: 3px;
    width: 2em;
    border-radius: 2px;
    position: relative;
  }

  .menu-toggle-label span::before,
  .menu-toggle-label span::after {
    content: '';
    position: absolute;
  }

   .menu-toggle-label span::before {
      bottom: 10px;
   }
   
  .menu-toggle-label span::after {
      top: 10px;
   }
 
/* Link styling */
  .links ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .links li {
    vertical-align: top;
    margin-top: 14px;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .links a {
    opacity: 1;
    position: relative;
    color: white;
    color: black;
    text-decoration: none;
    font-weight: 500;
    font-size: 20px;
    line-height: 26px;
  }
  
  .links a::before {
    content: '';
    display: block;
    height: 3px;
    background: black;
    background: white;
    position: absolute;
    top: -.75em;
    top: -8px;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }
  
  .links a:hover::before {
    transform: scale(1,1);
  }

/* Body text for sections */
.text1, .text2, .text3, .text4, .text5 {
  position: relative;
  top:20px;
  text-align:left;
  font-size: var(--detail_font_mobile);
  /*padding:10px 16px;
  background-color: var(--navbar_bg_mobile);*/
}

/*Welcome */
.ptop {
  position: relative;
  top:44px;
  left: 0px;
}

.slider {
    grid-area: slider;
    width: 100%;
    min-height: 320px;
    background-image: url('img/lt_slider_pic1.jpg');
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0px auto;
    animation: slide 30s infinite;
}
@keyframes slide {
    14% {
      background-image: url('img/lt_slider_pic2.jpg');
      background-position: center; 
      background-repeat: no-repeat;
      background-size: cover;
    }
    28% {
      background: url('img/lt_slider_pic3.jpg');
      background-position: top; 
      background-repeat: no-repeat;
      background-size: cover;
    }
    42% {
      background: url('img/lt_slider_pic4.jpg');
      background-position: center; 
      background-repeat: no-repeat;
      background-size: cover;
    }
    56% {
      background: url('img/lt_slider_pic5.jpg');
      background-position: center; 
      background-repeat: no-repeat;
      background-size: cover;
    }
    70% {
      background: url('img/lt_slider_pic6.jpg');
      background-position: center; 
      background-repeat: no-repeat;
      background-size: cover;
    }
    84% {
      background: url('img/lt_slider_pic7.jpg');
      background-position: center; 
      background-repeat: no-repeat;
      background-size: cover;
    }
}

#welcome .ptext {
  text-transform:uppercase;
  top:70%;
}

.text1 {
  padding:10px 22px;
}

/* Aktuelles */
.pimg2 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home2-small.jpg');
  background-image:url('img/lt-home14.jpg');
  opacity: 0.70;
  width: 100%;
  min-height: 260px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#aktuell .ptext {
  text-transform:uppercase;
  top:80%;
}

.text2 {
  padding:10px 22px;
}

/* Monatsprogramm */
.pimg3 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home8-small.jpg');
  opacity: 0.70;
  width: 100%;
  min-height: 260px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#monatsprogramm .ptext {
  text-transform:uppercase;
  top:80%;
}

.text3 {
  padding:10px 22px;
}

.header1 {
  font-weight: bold;
}

/* Mitglieder */
.pimg4 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home6-small.jpg');
  opacity: 0.70;
  width: 100%;
  min-height: 260px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#mitglieder .ptext {
  text-transform:uppercase;
  top:80%;
}

.text4 {
  padding:10px 22px;
}

/* Verschiedenes*/
.pimg5 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home15.jpg');
  opacity: 0.70;
  width: 100%;
  min-height: 260px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#verschiedenes .ptext {
  text-transform:uppercase;
  top:80%;
}

.text5 {
  padding:10px 22px;
}

.section{
  text-align:left;
  padding:10px 16px;
  font-size: var(--detail_font_mobile);
  background-color: var(--navbar_bg_mobile);
}

.section-orange{
  background-color: var(--navbar_bg_mobile);
  color: var(--text_color);
}


.ptext{
  position:absolute;
  top:80%;
  width:100%;
  text-align:center;
  color:#000;
  font-size: var(--detail_font_mobile);
  letter-spacing:5px;
  text-transform:uppercase;
}

.ptext .border{
  background-color: var(--navbar_bg_mobile);
  color:#fff;
  color: var(--text_color);
  padding:10px;
}

.ptext .border.trans{
  background-color:transparent;
}

.monatsprogramm {
  width: 100%;
  display: grid;
  line-height: 22px;
  font-size: var(--detail_font_mobile);
  grid-template-columns: 1fr;
  grid-template-areas: 
  "header1"
  "header2";
}

.header1 {
  grid-area: header1;
  font-size: var(--detail_font_mobile);
  text-align: left;
}

.header2 {
  grid-area: header2;
  font-size: var(--detail_font_mobile);
  text-align: left;
  margin-bottom: 10px;
}

.mitglieder {
  display: grid;
  width: 100%;
  margin: 0px;
  padding: 0px;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "leitbild"
  "gruppen"
  "blog"
  "resultate"
  "meldung"
  "birsegglauf"
  "fotos"
  "longjog"
  "test";
}

.gruppen {
  grid-area: gruppen;
  margin-bottom: 20px;
}

.gruppen img {
  width: 30px;
  height: 30px;
}

.gruppen a {
  text-decoration: none;
  color:black;
  font-weight: 500;
}

.leitbild {
  grid-area: leitbild;
  margin-bottom: 20px;
}

.leitbild img {
  width: 30px;
  height: 30px;
}

.leitbild a {
  text-decoration: none;
  color:black;
  font-weight: 500;
}

.resultate {
  grid-area: resultate;
  margin-bottom: 20px;
}

.resultate img {
  width: 30px;
  height: 30px;
}

.resultate a {
  text-decoration: none;
  color:black;
  font-weight: 500;
}

.fotos {
  grid-area: fotos;
  margin-bottom: 20px;
}

.fotos img {
  width: 30px;
  height: 30px;
}

.fotos a {
  text-decoration: none;
  color:black;
  font-weight: 500;
}

.blog {
  grid-area: blog;
  margin-bottom: 20px;
}

.blog img {
  width: 30px;
  height: 30px;
}

.blog a {
  text-decoration: none;
  color:black;
  font-weight: 500;
}

.birsegglauf {
  grid-area: birsegglauf;
  margin-bottom: 20px;
}

.birsegglauf img {
  width: 30px;
  height: 30px;
}

.birsegglauf a {
  text-decoration: none;
  color:black;
  font-weight: 500;
}

.meldung {
  grid-area: meldung;
  margin-bottom: 20px;
}

.meldung img {
  width: 30px;
  height: 30px;
}

.meldung a {
  text-decoration: none;
  color:black;
  font-weight: 500;
}

.longjog {
  grid-area: longjog;
  margin-bottom: 20px;
}

.longjog img {
  width: 30px;
  height: 30px;
}

.longjog a {
  text-decoration: none;
  color:black;
  font-weight: 500;
}

.test {
  grid-area: test;
  margin-bottom: 20px;
}

.test img {
  width: 30px;
  height: 30px;
}

.test a {
  text-decoration: none;
  color:black;
  font-weight: 500;
}

.verschiedenes {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "sponsoren"
  "verschiedenes-links"
  "kontakt";
}

.sponsoren {
  display: grid;
  width: 100%;
  grid-template-rows: 30px 80px 80px 80px 80px 20px;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "title"
  "image1"
  "image2"
  "image3"
  "image4";
}

.sponsoren h4 {
  grid-area: title;
  text-align: center;
  margin: auto auto;
  font-size: var(--header_font_mobile);
  font-weight: 500;
}

.image1 {
  grid-area: image1;
  background-image:url('img/sponsor-trainin.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  margin-bottom: 10px;
}

.image2 {
  grid-area: image2;
  background-image:url('img/sponsor-raiffeisen.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  margin-bottom: 10px;
}

.image3 {
  grid-area: image3;
  background-image:url('img/sponsor-mevo.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  margin-bottom: 10px;
}

.image4 {
  grid-area: image4;
  background-image:url('img/sponsor-aektiv.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
  margin-bottom: 10px;
}

.verschiedenes-links {
  grid-area: verschiedenes-links;
  display: grid;
  width: 100%;
  grid-template-rows: 30px 30px auto 30px 30px auto;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "title"
  "verlink"
  "verlink"
  "verlink"
  "verlink"
  "image1";
}

.verschiedenes-links h4 {
  grid-area: title;
  text-align: center;
  margin: auto auto;
  font-size: var(--header_font_mobile);
  font-weight: 500;
}

.verschiedenes-links .link a {
  grid-area: verlink;
}

.verschiedenes-links a {
  display: block;
  margin: 0px auto;
}

.verschiedenes-links .image1 {
  grid-area: image1;
  background-image:url('img/nws-logo-klein.jpg');
  width: 200px;
  height: 70px;
  background-position:center;
  background-position: top;
  background-size:contain;
  background-repeat:no-repeat;
}


.kontakt {
  grid-area: kontakt;
  display: grid;
  width: 100%;
  grid-template-rows: 20px 80px;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "title"
  "mail";
}

.kontakt h4 {
  grid-area: title;
  text-align: center;
  font-size: var(--header_font_mobile);
  font-weight: 500;
  margin-top: 30px;
}

.kontakt a {
  grid-area: mail;
  text-align: center;
  font-size: var(--header_font_mobile);
  font-weight: 400;
  margin-top: 40px;
}

.button {
  display: inline-block;
  background: var(--button_color_mobile);
  color: black;
  font-weight: 600;
  font-size: var(--detail_font_mobile);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  padding: 8px 16px;
  margin-top: 10px;
}

.button:hover {
  background: var(--link_button_color);
  color: white;
  cursor: pointer;
}


/* Tablet Landscape */
@media screen and (min-width: 990px) {

body, html{
  height:100%;
  margin:0;
  padding:0;
  font-size: var(--detail_font_tablet);
  font-family:Arial, Alto;
  font-weight:400;
  line-height: 22px;
  background-color: var(--body_bg);
  background-color: var(--navbar_bg_mobile);
  color: var(--text_color);
}

  .menu-toggle, .menu-toggle-label {
    display: none;
  }

  .links-menu {
    display: none;
  }

  .navbar {
    width: 100%;
    background-color: var(--navbar_bg_desktop);
    display: grid;
    grid-template-columns: 5vw 30vw 50vw;
    grid-template-areas: 
      "logo logo-text links";
  }

  .logo {
    grid-area: logo;
    width: 110px;
    height: 70px;
    margin-left: -6px;
  }

  .logo img {
    width: 100%;
    height: 70px;
  }

  .logo-text {
    grid-area: logo-text;
    width: 300px;
    height: 70px;
    /*border: 1px solid blue;*/
  }

  .logo-text text {
    color:white;
    text-align: left;
    vertical-align: top;
    line-height: 22px;
    font-weight: 500;
    font-size: var(--header_font_tablet);
  }

  .links {
    grid-area: links;
    height: 60px;
    top: 0%;
    /*border: 1px solid red;*/
  }

  .links ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .links li {
    vertical-align: top;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight:500;
  }

  .links a {
    opacity: 1;
    position: relative;
    color: white;
    text-decoration: none;
    font-size: 14px;
    margin-left: 0px;
    margin-right: 10px;
  }
  
  .links a::before {
    content: '';
    display: block;
    height: 3px;
    background: black;
    position: absolute;
    top: -.75em;
    top: -8px;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }
  
  .links a:hover::before {
    transform: scale(1,1);
  }

/* Body text for sections */
.text1, .text2, .text3, .text4, .text5 {
  position: relative;
  top:20px;
  text-align:left;
  font-size: var(--detail_font_tablet);
  /*padding:10px 16px;
  background-color: var(--navbar_bg_mobile); */
}

/*Welcome */
.ptop {
  position: relative;
  top:60px;
  left: 0px;
}

.slider {
    grid-area: slider;
    width: 98vw;
    min-height: 80vh;
    background-image: url('img/lt_slider_pic1.jpg');
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0px auto;
    animation: slide 30s infinite;
}
@keyframes slide {
    14% {
      background-image: url('img/lt_slider_pic2.jpg');
      background-position: center; 
      background-repeat: no-repeat;
      background-size: cover;
    }
    28% {
      background: url('img/lt_slider_pic3.jpg');
      background-position: top; 
      background-repeat: no-repeat;
      background-size: cover;
    }
    42% {
      background: url('img/lt_slider_pic4.jpg');
      background-position: center; 
      background-repeat: no-repeat;
      background-size: cover;
    }
    56% {
      background: url('img/lt_slider_pic5.jpg');
      background-position: center; 
      background-repeat: no-repeat;
      background-size: cover;
    }
    70% {
      background: url('img/lt_slider_pic6.jpg');
      background-position: center; 
      background-repeat: no-repeat;
      background-size: cover;
    }
    84% {
      background: url('img/lt_slider_pic7.jpg');
      background-position: center; 
      background-repeat: no-repeat;
      background-size: cover;
    }
}

#welcome .ptext {
  text-transform:uppercase;
  top:70%;
}

.text1 {
  padding:20px 36px;
}

/* Aktuelles */
.pimg2 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home14.jpg');
  opacity: 0.90;
  width: 98vw;
  margin: auto auto;
  min-height: 360px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#aktuell .ptext {
  text-transform:uppercase;
  top:80%;
}

.text2 {
  padding:20px 36px;
}

/* Monatsprogramm */
.pimg3 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home8-small.jpg');
  opacity: 0.90;
  width: 98vw;
  min-height: 360px;
  margin: auto auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#monatsprogramm .ptext {
  text-transform:uppercase;
  top:80%;
}

.text3 {
  padding:20px 36px;
}

/* Mitglieder */
.pimg4 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home6-small.jpg');
  opacity: 0.90;
  width: 98vw;
  min-height: 360px;
  margin: auto auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#mitglieder .ptext {
  text-transform:uppercase;
  top:80%;
}

.text4 {
  padding:20px 36px;
}

/* Verschiedenes*/
.pimg5 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home15.jpg');
  opacity: 0.90;
  width: 98vw;
  min-height: 360px;
  margin: auto auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#verschiedenes .ptext {
  text-transform:uppercase;
  top:80%;
}

.section {
  text-align:left;
  padding:20px 40px;
  font-size: var(--detail_font_tablet);
  width: 100vw;
  margin: auto auto;
}

.section-orange {
  background-color: var(--navbar_bg_desktop);
  color: var(--text_color);
}
.ptext {
  position:absolute;
  top:80%;
  width:100%;
  text-align:center;
  font-size: var(--header_font_mobile);
  font-weight: 700;
  letter-spacing:8px;
  text-transform:uppercase;
}

.ptext .border {
  background-color: var(--navbar_bg_desktop);
  color: var(--text_color);
  padding:20px;
  border-style: solid;
  border-color: black;
}

.ptext .border.trans {
  background-color: var(--navbar_bg_desktop);
  border-style: solid;
  border-color: var(--navbar_bg_desktop);
}

.monatsprogramm {
  width: 100%;
  display: grid;
  line-height: 22px;
  font-size: var(--detail_font_desktop);
  background-color: var(--navbar_bg_desktop);
  grid-template-columns: 20% 80%;
  grid-template-areas: 
  "header1 header2";
}

.header1 {
  grid-area: header1;
  background-color: var(--navbar_bg_desktop);
  font-size: var(--detail_font_tablet);
  text-align: left;
}

.header2 {
  grid-area: header2;
  background-color: var(--navbar_bg_desktop);
  font-size: var(--detail_font_tablet);
  text-align: left;
  margin-bottom: -10px;
}

.mitglieder {
  display: grid;
  width: 100%;
  grid-template-rows: 60px 60px 70px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
  "leitbild resultate fotos"
  "gruppen meldung longjog"
  "blog birsegglauf test"; 
}

.gruppen {
  grid-area: gruppen;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_tablet);
  font-weight: 600;
}

.gruppen img {
  width: 45px;
  height: 45px;
}

.gruppen a {
  text-decoration: none;
  color:black;
}

.resultate {
  grid-area: resultate;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_tablet);
  font-weight: 600;
}

.resultate img {
  width: 45px;
  height: 45px;
}

.resultate a {
  text-decoration: none;
  color:black;
}

.fotos {
  grid-area: fotos;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_tablet);
  font-weight: 600;
}

.fotos img {
  width: 45px;
  height: 45px;
}

.fotos a {
  text-decoration: none;
  color:black;
}

.leitbild {
  grid-area: leitbild;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_tablet);
  font-weight: 600;
}

.leitbild img {
  width: 45px;
  height: 45px;
}

.leitbild a {
  text-decoration: none;
  color:black;
}

.birsegglauf {
  grid-area: birsegglauf;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_tablet);
  font-weight: 600;
}

.birsegglauf img {
  width: 45px;
  height: 45px;
}

.birsegglauf a {
  text-decoration: none;
  color:black;
}

.blog {
  grid-area: blog;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_tablet);
  font-weight: 600;
}

.blog img {
  width: 45px;
  height: 45px;
}

.blog a {
  text-decoration: none;
  color:black;
}

.meldung {
  grid-area: meldung;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_tablet);
  font-weight: 600;
}

.meldung img {
  width: 45px;
  height: 45px;
}

.meldung a {
  text-decoration: none;
  color:black;
}

.longjog {
  grid-area: longjog;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_tablet);
  font-weight: 600;
}

.longjog img {
  width: 45px;
  height: 45px;
}

.longjog a {
  text-decoration: none;
  color:black;
}

.test {
  grid-area: test;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_tablet);
  font-weight: 600;
}

.test img {
  width: 45px;
  height: 45px;
}

.test a {
  text-decoration: none;
  color:black;
}

.verschiedenes {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "sponsoren"
  "verschiedenes-links"
  "kontakt";
}

.sponsoren {
  grid-area: sponsoren;
  display: grid;
  width: 100%;
  grid-template-rows: 60px 80px 20px;
  grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-template-areas: 
  "title title title title title title title"
  "image1 . image2 . image3 . image4";
}

.sponsoren h4 {
  grid-area: title;
  text-align: center;
  font-size: var(--header_font_tablet);
  font-weight: 600;
}

.image1 {
  grid-area: image1;
  background-image:url('img/sponsor-trainin.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}

.image2 {
  grid-area: image2;
  background-image:url('img/sponsor-raiffeisen.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}

.image3 {
  grid-area: image3;
  background-image:url('img/sponsor-mevo.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}

.image4 {
  grid-area: image4;
  background-image:url('img/sponsor-aektiv.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}

.verschiedenes-links {
  grid-area: verschiedenes-links;
  display: grid;
  width: 100%;
  padding: 0px 100px;
  grid-template-rows: 60px auto auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 
  "title title title"
  "verlink verlink image1"
  "verlink verlink image1";
}

.verschiedenes-links h4 {
  grid-area: title;
  text-align: center;
  font-size: var(--header_font_tablet);
  font-weight: 600;
}

.verschiedenes-links .link a {
  grid-area: verlink;
}

.verschiedenes-links a {
  display: block;
  margin: 0px auto;
}

.verschiedenes-links .image1 {
  grid-area: image1;
  background-image:url('img/nws-logo-klein.jpg');
  width: 200px;
  height: 70px;
  background-position:center;
  background-position: top;
  background-size:contain;
  background-repeat:no-repeat;
}

.kontakt {
  grid-area: kontakt;
  display: grid;
  width: 100%;
  grid-template-rows: 50px 60px;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "title"
  "mail";
}

.kontakt h4 {
  grid-area: title;
  text-align: center;
  font-size: var(--header_font_tablet);
  font-weight: 600;
  margin-top: 50px;
}

.kontakt a {
  grid-area: mail;
  text-align: center;
  font-size: var(--detail_font_tablet);
  font-weight: 400;
  margin-top: 40px;
}

.button {
  display: inline-block;
  background: var(--button_color_mobile);
  color: black;
  font-weight: 600;
  font-size: var(--detail_font_tablet);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  padding: 8px 16px;
  margin-top: 10px;
}

.button:hover {
  background: var(--link_button_color);
  color: white;
  cursor: pointer;
}


}

/* Desktop */
@media screen and (min-width: 1100px) {

body, html{
  height:100%;
  margin:0;
  padding:0;
  /*scroll-behavior: smooth;*/
  font-size:16px;
  font-family:Arial, Alto;
  font-weight:400;
  line-height: 22px;
  background-color: var(--body_bg);
  background-color: var(--navbar_bg_desktop);
  color: var(--text_color);
}

  .menu-toggle, .menu-toggle-label {
    display: none;
  }


  .links-menu {
    display: none;
  }

  .navbar {
    width: 100%;
    background-color: var(--navbar_bg_desktop);
    display: grid;
    grid-template-columns: 8vw 45vw 40vw;
    grid-template-areas: 
      "logo logo-text links";
  }

  .logo {
    grid-area: logo;
    width: 140px;
    height: 90px;
    margin-left: -8px;
  }

  .logo img {
    width: 100%;
    height: 90px;
  }

  .logo-text {
    grid-area: logo-text;
    /*width: 300px;*/
    height: 90px;
    /*border: 1px solid blue;*/
  }

  .logo-text text {
    color:white;
    text-align: left;
    vertical-align: top;
    line-height: 26px;
    font-weight: 600;
    font-size: var(--detail_font_desktop);
    font-size: 26px;
  }

  .links {
    grid-area: links;
    height: 70px;
    top:0%;
    /*border: 1px solid red;*/
  }

  .links ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  .links li {
    vertical-align: top;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
  }

  .links a {
    opacity: 1;
    position: relative;
    color: white;
    text-decoration: none;
    font-size: 15px;
    margin-left: 0px;
    margin-right: 12px;
  }
  
  .links a::before {
    content: '';
    display: block;
    height: 5px;
    background: black;
    position: absolute;
    top: -.75em;
    top: -8px;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }
  
  .links a:hover::before {
    transform: scale(1,1);
  }

/* Body text for sections */
.text1, .text2, .text3, .text4, .text5 {
  position: relative;
  top:20px;
  text-align: left;
  font-size: var(--detail_font_desktop);
  background-color: var(--navbar_bg_mobile);
}

/*Welcome */
.ptop {
  position: relative;
  top:60px;
  left: 0px;
}

.slider {
    grid-area: slider;
    width: 98vw;
    min-height: 600px;
    background-image: url('img/lt_slider_pic1.jpg');
    background-position: center; 
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0px auto;
    animation: slide 30s infinite;
}
@keyframes slide {
    14% {
      background-image: url('img/lt_slider_pic2.jpg');
      background-position: top; 
      background-repeat: no-repeat;
      background-size: cover;
    }
    28% {
      background: url('img/lt_slider_pic3.jpg');
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover;
    }
    42% {
      background: url('img/lt_slider_pic4.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    56% {
      background: url('img/lt_slider_pic5.jpg');
      background-position: top;
      background-repeat: no-repeat;
      background-size: cover;
    }
    70% {
      background: url('img/lt_slider_pic6.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    84% {
      background: url('img/lt_slider_pic7.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
}

#welcome .ptext {
  text-transform:uppercase;
  top:80%;
}

.text1 {
  padding:20px 40px;
  line-height: 24px;
}

/* Aktuelles */
.pimg2 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home2-small.jpg');
  background-image:url('img/lt-home14.jpg');
  opacity: 0.90;
  width: 98vw;
  margin: auto auto;
  min-height: 70%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#aktuell .ptext {
  text-transform:uppercase;
  top:80%;
}

.text2 {
  padding:20px 40px;
  line-height: 24px;
}

/* Monatsprogramm */
.pimg3 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home8-small.jpg');
  opacity: 0.90;
  width: 98vw;
  min-height: 70%;
  margin: auto auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#monatsprogramm .ptext {
  text-transform:uppercase;
  top:80%;
}

.text3 {
  padding:20px 40px;
  line-height: 24px;
}

/* Mitglieder */
.pimg4 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home6-small.jpg');
  opacity: 0.90;
  width: 98vw;
  min-height: 70%;
  margin: auto auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#mitglieder .ptext {
  text-transform:uppercase;
  top:80%;
}

.text4 {
  padding:20px 40px;
}

/* Verschiedenes*/
.pimg5 {
  position: relative;
  top:20px;
  left: 0px;
  background-image:url('img/lt-home15.jpg');
  opacity: 0.90;
  width: 98vw;
  min-height: 70%;
  margin: auto auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

#verschiedenes .ptext {
  text-transform:uppercase;
  top:80%;
}

.section {
  text-align:left;
  padding:20px 80px;
  font-size: var(--detail_font_desktop);
  width: 98vw;
  margin: auto auto;
}

.section-orange {
  background-color: var(--navbar_bg_desktop);
  color: var(--text_color);
}

.ptext {
  position:absolute;
  top:80%;
  width:100%;
  text-align:center;
  font-size:27px;
  font-weight: 700;
  letter-spacing:8px;
  text-transform:uppercase;
}

.ptext .border {
  background-color: var(--navbar_bg_desktop);
  color:#fff;
  color: var(--text_color);
  padding:20px;
  border-style: solid;
  border-color: black;
}

.ptext .border.trans {
  background-color:transparent;
  background-color: var(--navbar_bg_desktop);
  border-style: solid;
  border-color: var(--navbar_bg_desktop);
}

.monatsprogramm {
  width: 100%;
  display: grid;
  line-height: 26px;
  font-size: var(--detail_font_desktop);
  background-color: var(--navbar_bg_desktop);
  grid-template-columns: 10% 90%;
  grid-template-areas: 
  "header1 header2";
}

.header1 {
  grid-area: header1;
  background-color: var(--navbar_bg_desktop);
  font-size: var(--detail_font_desktop);
  text-align: left;
}

.header2 {
  grid-area: header2;
  background-color: var(--navbar_bg_desktop);
  font-size: var(--detail_font_desktop);
  text-align: left;
  margin-bottom: -10px;
}


.mitglieder {
  display: grid;
  width: 100%;
  grid-template-rows: 100px 100px 70px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: 
  "leitbild resultate fotos"
  "gruppen meldung longjog"
  "blog birsegglauf test";
}

.gruppen {
  grid-area: gruppen;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_desktop);
  font-weight: 600;
}

.gruppen img {
  width: 60px;
  height: 60px;
}

.gruppen a {
  text-decoration: none;
  color:black;
}

.resultate {
  grid-area: resultate;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_desktop);
  font-weight: 600;
}

.resultate img {
  width: 60px;
  height: 60px;
}

.resultate a {
  text-decoration: none;
  color:black;
}

.fotos {
  grid-area: fotos;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_desktop);
  font-weight: 600;
}

.fotos img {
  width: 60px;
  height: 60px;
}

.fotos a {
  text-decoration: none;
  color:black;
}

.leitbild {
  grid-area: leitbild;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_desktop);
  font-weight: 600;
}

.leitbild img {
  width: 60px;
  height: 60px;
}

.leitbild a {
  text-decoration: none;
  color:black;
}

.birsegglauf {
  grid-area: birsegglauf;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_desktop);
  font-weight: 600;
}

.birsegglauf img {
  width: 60px;
  height: 60px;
}

.birsegglauf a {
  text-decoration: none;
  color:black;
}

.blog {
  grid-area: blog;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_desktop);
  font-weight: 600;
}

.blog img {
  width: 60px;
  height: 60px;
}

.blog a {
  text-decoration: none;
  color:black;
}

.meldung {
  grid-area: meldung;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_desktop);
  font-weight: 600;
}

.meldung img {
  width: 60px;
  height: 60px;
}

.meldung a {
  text-decoration: none;
  color:black;
}

.longjog {
  grid-area: longjog;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_desktop);
  font-weight: 600;
}

.longjog img {
  width: 60px;
  height: 60px;
}

.longjog a {
  text-decoration: none;
  color:black;
}

.test {
  grid-area: test;
  padding: 5px 5px;
  margin: 5px 6px;
  font-size: var(--detail_font_desktop);
  font-weight: 600;
}

.test img {
  width: 60px;
  height: 60px;
}

.test a {
  text-decoration: none;
  color:black;
}

.verschiedenes {
  display: grid;
  width: 100%;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "sponsoren"
  "verschiedenes-links"
  "kontakt";
}

.sponsoren {
  grid-area: sponsoren;
  display: grid;
  background: transparent;
  width: 100%;
  grid-template-rows: 60px 80px 20px;
  grid-template-columns: 1fr 20px 1fr 20px 1fr 20px 1fr;
  grid-template-areas: 
  "title title title title title title title"
  "image1 . image2 . image3 . image4";
}

.sponsoren h4 {
  grid-area: title;
  text-align: center;
  font-size: var(--header_font_desktop);
  font-weight: 600;
}

.sponsoren .image1 {
  grid-area: image1;
  background-image:url('img/sponsor-trainin.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}

.sponsoren .image2 {
  grid-area: image2;
  background-image:url('img/sponsor-raiffeisen.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}

.sponsoren .image3 {
  grid-area: image3;
  background-image:url('img/sponsor-mevo.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}

.image4 {
  grid-area: image4;
  background-image:url('img/sponsor-aektiv.jpg');
  background-position:center;
  background-size:contain;
  background-repeat:no-repeat;
}

.verschiedenes-links {
  grid-area: verschiedenes-links;
  display: grid;
  width: 100%;
  padding: 0px 200px;
  grid-template-rows: 60px auto auto;
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas: 
  "title title title"
  "verlink verlink image1"
  "verlink verlink image1";
}

.verschiedenes-links h4 {
  grid-area: title;
  text-align: center;
  font-size: var(--header_font_desktop);
  font-weight: 600;
}

.verschiedenes-links .link a {
  grid-area: verlink;
}

.verschiedenes-links a {
  display: block;
  margin: 0px auto;
}

.verschiedenes-links .image1 {
  grid-area: image1;
  background-image:url('img/nws-logo-klein.jpg');
  width: 200px;
  height: 70px;
  background-position:center;
  background-position: top;
  background-size:contain;
  background-repeat:no-repeat;
}

.kontakt {
  grid-area: kontakt;
  display: grid;
  width: 100%;
  grid-template-rows: 60px 80px;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "title"
  "mail";
}

.kontakt h4 {
  grid-area: title;
  text-align: center;
  font-size: var(--header_font_desktop);
  font-weight: 600;
  margin-top: 50px;
}

.kontakt a {
  grid-area: mail;
  text-align: center;
  font-size: var(--detail_font_desktop);
  font-weight: 400;
  margin-top: 40px;
}

.button {
  display: inline-block;
  background: var(--button_color);
  color: black;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 8px;
  padding: 8px 16px;
  margin-top: 10px;
}

.button:hover {
  background: var(--link_button_color);
  color: white;
  text-decoration: none;
  cursor: pointer;
}


}