html, body {
    margin: 0;
    padding: 0;
}

article {
  color: #333;
  margin: auto;
  width: 90%;
  max-width: 1100px;
}

article h1 {
  font-size: 1.5em;
}

img.topImg {
  width: 100%;
  height: auto;
}

body { font-family: Arial, sans-serif; padding-bottom:50px; }
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 1000px;
  margin: auto;
}


.item img { width:100%; cursor:pointer; transition:transform 0.3s; }
.item img:hover { transform:scale(1.05); }

.item.decorative img { cursor:default; transform:none; }
.overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); display:none; justify-content:center; align-items:center; }
.overlay-content { background:white; padding:20px; border-radius:10px; max-width:600px; position:relative; animation:fadeIn 0.3s ease; }
.close-btn { position:absolute; top:10px; right:15px; font-size:30px; background:none; border:none; cursor:pointer; }
.vertical-text { transform:rotate(90deg); transform-origin:left top; position:absolute; right:-10px; top:50%; font-size:14px; }
@media (max-width:600px){ .item.decorative { grid-column:1 / -1; order:99; margin-top:20px; } }
@keyframes fadeIn { from {opacity:0; transform:translateY(-20px);} to {opacity:1; transform:translateY(0);} }

main {
  width: 100%;
  margin: 0;
  padding-top: 2em;
}
.subContent {
  font-size: 1.5em;
  margin-top: -110px;
  text-align: center;
}

.subContent a:link, .subContent a:hover, .subContent a:visited {
  color: #20a74b;
  font-weight: bold;
}

footer {
    text-align: center;
    width: 100vw;
    background-color: #20a74b;
    color: #fff;
    font-size: .8em;
    padding: 4px;
    box-sizing: border-box;
}
#navMenu {
  text-align: right;
}

#navMenu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  gap: 0.5em;
  padding: 5px;
}

#navMenu li::after {
  content: "|";
  margin: 0 0.0 0 0.5em;
  color: rgb(170, 213, 184);
}
#navMenu li a,
article a
{
  padding: 2px 4px;
}
#navMenu li a, #navMenu li a:link, #navMenu li a:visited,
article a, article a:link, article a:visited  {
  color:  #20a74b;
}
#navMenu li a:hover,
article a:hover {
  background-color: #20a74b;
  color: white;

}

#navMenu li:last-child::after {
  content: "";
}
.logo-mobil { display: none; }
.logo-desktop { display: block; }

.linebreak {
    display: inline;
  }
  .linebreak::before {
    content: " • ";
  }
  
  header.logo {
    width: 100vw;
    height: 120px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2em;

  }
  .hide-mobile {
    white-space: nowrap;
  }
  .logo-desktop {
    width: auto;
    height: 100%;
  }

  @media (min-width: 769px) and (max-width: 899px) {
    .grid-container {
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding: 20px;
    }
  }

@media (max-width: 768px) {
  article h1 {
    font-size: 1.4em;
  }

  .subContent {
    font-size: 1.35em;
    margin-top: -105px;
  }
  main {
    padding-top: 1em;
    }
    .logo-desktop { display: none; }
    .logo-mobil { display: block; }

    #navMenu {
      text-align: center;
    }

    .linebreak {
        display: block;
        margin-top: 0.3em;
      }
      .linebreak::before {
        content: "";
      }
      header.logo {
        margin-top: 0;
      }

      .grid-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 10px;
      }
    }

    @media (max-width: 601px) {
      article h1 {
        font-size: 1.3em;
      }
    
      .subContent {
        font-size: 1.2em;
        margin-top: -90px;
      }
      .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 10px;
      }
      .item.decorative {
        display: none;
      }
      .item.last {  
        grid-column: auto;
        justify-self: stretch;
        max-width: 100%;        
        width: 100%;            
      }
    }
  
    @media (max-width: 400px) {
      .overlay-content {
        padding: 5px;
      }
     
      article {
        font-size: 0.9em;
      }
      article h1 {
        font-size: 1.2em;
      }
    
      .subContent {
        font-size: 1.15em;
        margin-top: -70px;
      }
      .logo-mobil { height: 78px; }
      .hide-mobile {
        display: none;
      }
      main {
        padding-top: 0;
      }
      .grid-container {
        grid-template-columns: repeat(1, 1fr);
        padding: 5px;
      }
      .item.last {  
        grid-column: 1 / -1;
        justify-self: center;
        max-width: 100%;        
        width: 100%;            
      }
    }

    .item img {
      width: 100%;
      max-height: 140px;
      object-fit: contain;
      cursor: pointer;
      transition: transform 0.3s;
    }


@media (min-width: 602px) {
  .item.decorative {
    transform: translateY(-10px);
  }
   .item[data-info="lorenz-venenzentrum"],
  .item.last {
    grid-column: auto;
    justify-self: stretch;
    max-width: 100%;
    transform: translateX(calc(50% + 10px));
  }
}
@media (max-width: 600px) {
  .item.decorative {
    transform: none;  
    display: none;
  }
  .item.last, .item[data-info="lorenz-venenzentrum"] {
    grid-column: auto;
    justify-self: stretch;
    max-width: 100%;
    width: 100%;
    transform: none;
  }
}