/* ======================================
   Copyright-CSS (Basis)
   ====================================== */
@media (min-width: 393px) {
  body {
    height: 100%;
    margin: 0px;
  }

  * {
    box-sizing: border-box;
  }

  /* Farben */
  h1,
  h2,
  h3 {
    margin: 10px;
    color: yellow;
  }

  h4 {
    margin: 10px;
    color: lightsalmon;
  }

  h5 {
    color: lightgray;
  }

  h6 {
    color: lightgray;
  }

  p {
    margin: 10px;
    color: yellow;
  }

  a {
    color: greenyellow;
  }

  /* ======================================
   MOBILE FIRST (Default)
   ====================================== */

  .container {
    display: grid;
    grid-template-areas:
      "header"
      "navi"
      "content"
      "bilder"
      "menu";

    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;

    width: auto;
    padding: 1px;
    background-color: black;
    overflow-y: visible; /* WICHTIG */
  }

  /* Grundabstände */
  .container div {
    padding: 2px;
  }

  /* gemeinsamer Sticky-Container für Header + Menü */
  .sticky-top {
    position: sticky;
    top: 0;
    z-index: 1000; /* über allen scrollenden Inhalten */
    background-color: black;
    transition: transform 0.3s ease; /* sanftes Ausblenden */
  }

  /* Header */
  .container .header {
    background-image: url("/assets/img/home/s2dlogo.webp");
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover; /* optional, dass das Bild skaliert */
    width: 100%;
    height: auto;
    text-align: center;
    padding-top: 2px;
    border: 1px solid gray;
  }

  /* Menu */
  .container .menu {
    grid-area: menu;
    background: rgba(78, 75, 75, 0.65);
    text-align: center;
    border: 1px solid gray;
  }

  /* Navi */
  .container .navi {
    grid-area: navi;
    background: rgba(78, 75, 75, 0.65);
    text-align: center;
    border: 1px solid gray;
  }

  /* Content */
  .container .content {
    grid-area: content;
    background: rgba(128, 127, 127, 0.65);
    text-align: left;
    display: grid;
    align-items: center;
    align-content: center;
    width: 100%;
    height: auto;

    p {
      margin: 10px;
      color: white;
    }

    ol {
      color: white;
    }

    li {
      color: white;
    }
  }

  /* Bilder */
  .container .bilder {
    grid-area: bilder;
    background: rgba(78, 75, 75, 0.65);

    display: grid;
    align-items: center;
    align-content: center;
    text-align: left;
    margin: auto;
    width: 100%;
    height: auto;

    text-align: center;
    border: 1px solid gray;
  }

  /* ======================================
   OVERLAY / LIGHTBOX
   ====================================== */

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: #000; /* 👉 komplett deckend */
    background-color: rgba(0, 0, 0, 0.95); /* halbtransparentes Schwarz */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* ✅ sicherstellen, dass es über allem liegt */
  }

  .overlay.hidden {
    display: none;
  }

  .overlay-content img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 0 30px black;
  }

  .overlay-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 10px;
  }

  /* Titel unter dem Bild */
  #overlay-title {
    color: white;
    font-size: 1.2rem;
    text-align: center;
  }

  /* Pfeile über dem Bild */
  #prev-btn,
  #next-btn {
    position: absolute;
    top: 25px;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    padding: 10px;
  }

  #prev-btn {
    left: 5px;
  } /* links vom Bild */
  #next-btn {
    right: 5px;
  } /* rechts vom Bild */

  #play-pause-btn {
    position: absolute;
    top: 15px;
    left: 105px;
    transform: translateX(-50%);

    font-size: 1rem;
    padding: 2px 2px;
    cursor: pointer;
  } /* Pause-Play-Button */

  #home-btn {
    position: absolute;
    top: 15px;
    right: 105px;
    font-size: 24px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
  }

  .hidden {
    display: none;
  }

  .byline {
    color: yellow;
    margin: 0;
  }

  .subline {
    color: white;
    margin: 10px;
  }

  /* Bildunterschriften platzieren für Standortbilder */
  dl.bildunterschrift {
    float: left;
    margin: 10px 10px 10px 0;
  }
  dl.bildunterschrift dd {
    color: white;
    margin: 0;
    font-size: 90%;
  }

  th {
    color: lightsalmon;
  }

  td {
    color: rgb(146, 199, 54);
  }
}

/* ======================================
   Ab hier Anpassungen 
   für Tablet und Desktop
   ====================================== */

/* ======================================
   TABLET (ab 768px)
   ====================================== */
@media (min-width: 768px) {
  html,
  body {
    height: 100%;
    margin: 0;
  }

  .container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .content {
    flex: 1;
    padding: 20px;
  }

  /* Header */
  .container .header {
    background-image: url("/assets/img/home/s2dlogo.webp");
    background-repeat: repeat;
    background-position: top;
    background-size: contain; /* optional, dass das Bild skaliert */

    display: grid;
    align-items: center;
    align-content: center;
    margin: auto;
    width: 100%;
    height: auto;
    text-align: center;
    padding-top: 2px;
    border: 1px solid gray;

    position: sticky;
    top: 0;
    z-index: 1000; /* wichtig, damit der Header über allem liegt */
  }

  /* Content */
  .container .content {
    grid-area: content;
    background: rgba(128, 127, 127, 0.65);

    display: grid;
    align-items: center;
    align-content: center;
    text-align: left;
    margin: auto;
    width: 100%;
    height: auto;

    p {
      color: white;
    }

    ol {
      color: white;
    }

    li {
      color: white;
    }
  }

  /* Bilder */
  .container .bilder {
    grid-area: bilder;
    background: rgba(78, 75, 75, 0.65);

    display: grid;
    align-items: center;
    align-content: center;
    text-align: left;
    margin: auto;
    width: 100%;
    height: auto;

    text-align: center;
    border: 1px solid gray;
  }
}

/* ======================================
   DESKTOP (ab 1024px)
   ====================================== */

@media (min-width: 1024px) {
  html,
  body {
    height: 100%;
    margin: 0;
  }

  .container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }

  .content {
    flex: 1;
    padding: 20px;
  }

  /* Header */
  .container .header {
    background-image: url("/assets/img/home/s2dlogo.webp");
    background-repeat: repeat;
    background-position: top;
    background-size: contain; /* optional, dass das Bild skaliert */

    display: grid;
    align-items: center;
    align-content: center;
    margin: auto;
    width: 70%;
    height: auto;
    text-align: center;
    padding-top: 2px;
    border: 1px solid gray;

    position: sticky;
    top: 0;
    z-index: 1000; /* wichtig, damit der Header über allem liegt */
  }

  /* Content */
  .container .content {
    grid-area: content;
    background: rgba(128, 127, 127, 0.65);

    display: grid;
    align-items: center;
    align-content: center;
    text-align: left;
    margin: auto;
    width: 70%;
    height: auto;

    p {
      color: white;
    }

    ol {
      color: white;
    }

    li {
      color: white;
    }
  }

  /* Menu */
  .container .menu {
    grid-area: menu;
    background: rgba(78, 75, 75, 0.65);
    margin: auto;
    width: 70%;
    height: auto;
    text-align: center;
    border: 1px solid gray;
  }

  /* Navi */
  .container .navi {
    grid-area: navi;
    background: rgba(78, 75, 75, 0.65);
    margin: auto;
    width: 70%;
    height: auto;
    text-align: center;
    border: 1px solid gray;
  }

  /* Bilder */
  .container .bilder {
    grid-area: bilder;
    background: rgba(78, 75, 75, 0.65);

    display: grid;
    align-items: center;
    align-content: center;
    text-align: left;
    margin: auto;
    width: 70%;
    height: auto;

    text-align: center;
    border: 1px solid gray;
  }
}