html, body {
  height: 100%;
  margin: 0;
}

/*
.header {
    width:  calc(100% - 24px);
    height: 241px;
    background-color:#002164;
    padding-top: 16px;
    padding-left: 16px;
}
*/

.kachel-container {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 1rem;
} 

.kachel {
  background-color: #fff;
  padding:0.5rem; /* macht Probleme!!! */
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
} 

.kachel img {
  width: 300; /* new, before 100% */
  display: block; /* new */
  margin: auto; /* new */
  height: 225; /* new, before auto */
  border-radius: 4px;
}



/* ----- Dark Thema ----- */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }

  .kachel {
    background-color: #1e1e1e;
    /*box-shadow: 0 2px 6px rgba(0,0,0,0.6);*/
  }
  
  .kachel img {
    border: 2px solid #333;
  }
  
  .kachel:hover {
    /* box-shadow: 0 0px 20px #0057B7;
    box-shadow: 0 0px 20px #FFFFFF; */
    background-color: #555;
  }

  

  /* ----- Scrollbar Dark Mode ----- */
  ::-webkit-scrollbar {
    width: 12px;
  }

  ::-webkit-scrollbar-track {
    background: #1e1e1e;
  }

  ::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 6px;
    border: 3px solid #1e1e1e;
  }

  ::-webkit-scrollbar-thumb:hover {
    background-color: #777;
  }

}  



/* ----- Landscape-Modus: Horizontal scrollen ----- */
@media screen and (orientation: landscape) {
  .kachel-container {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    gap: 1rem;
/*    scroll-snap-type: x mandatory; */
    -webkit-overflow-scrolling: touch;

  }

  .kachel {
    flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: start;
  }

    .content {
    width: 100%;
    height: calc(100% - 292px);
  }

  .map {
    /* height: calc(100% - 296px); */
        height: 100%;
  }

}



/* ----- Googlemap erst ab 768px Screenbreit anzeigen ----- */
@media (min-width: 0px) {
  .content {
    width: 100%;
    height: calc(100% - 292px);
  }

  .map {
    /* height: calc(100% - 296px); */
        height: 100%;
  }
}