@charset "utf-8";

/*
---------------------------------------
Responsives Design
Vondies Activities
---------------------------------------
Mobile First:
Nein

Desktop First:
Ja

Die Desktop-Version befindet sich in style.css.
Diese Datei enthält ausschließlich Anpassungen
für kleinere Bildschirmgrößen.
--------------------------------------
*/

/*--- 1200px - Kleine Laptops ---*/
@media (max-width: 1200px) {
  /*--- Navigation ---*/

  /*--- Main Grid ---*/
  main {
    gap: 1rem;
    padding: 1.5rem;
  }
}

/*--- 992px - Tablet ---*/
@media (max-width: 992px) {
  /*--- Main Grid ---*/
  main {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "content1 content2 content3"
      "content4 content5 content6"
      "sidebar sidebar sidebar";
  }

  /*--- Sidebar ---*/
  .sidebar-content {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1rem 0;
  }

  .sidebar-content .card-image {
    flex: 0 0 30%;
    margin: 0 1rem;
  }

  .sidebar-content .card-text {
    flex: 1;
  }

  .sidebar .card-title {
    margin-bottom: 0.25rem;
  }
}

/*--- 768px - Smartphone ---*/
@media (max-width: 768px) {
  /*--- Navigation ---*/
  .nav-menu {
    display: none;
  }

  .hamburger-btn {
    display: flex;
  }

  .nav-logo {
    height: 65px;
  }
  /*--- Main Grid ---*/
  body.home main {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "content1 content2"
      "content3 content5"
      "sidebar sidebar";
  }

  main{
     grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "content1 content2"
      "content3 content4"
      "content5 content6"
      "sidebar sidebar";
  }
  /*--- Sidebar ---*/
 .sidebar-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /*--- Footer ---*/
  footer p {
    margin-bottom: 0.75rem;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-socialmedia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  /* --- Legal --- */
   .legal-page {
    margin: 2rem auto;
  }

  .legal-card {
    padding: 2rem;
  }

  .legal-card h1 {
    margin-bottom: 2rem;
  }

  .legal-section {
    padding: 1.5rem 0;
  }
}

/*--- 480px -  kleine Smartphones ---*/
@media (max-width: 480px) {
  /*--- Navigation ---*/

  /*--- Main Grid ---*/

  main {
    grid-template-columns: 1fr;
    grid-template-areas:
      "content1"
      "content2"
      "content3"
      "content4"
      "content5"
      "content6"
      "sidebar";
  }

  body.home main {
    grid-template-columns: repeat(1, 1fr);
    grid-template-areas:
      "content1"
      "content2"
      "content3"
      "content5"
      "sidebar";
  }

  /*--- Sidebar ---*/
  .sidebar-content {
    display: flex;
    flex-direction: column;
  }
  /*--- Footer ---*/
  footer p {
    margin-bottom: 0.75rem;
  }

  .footer-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .footer-socialmedia {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .footer-legal {
    margin-top: 1.25rem;
    text-align: center;
  }

  /* --- Legal --- */
  .legal-card {
    padding: 1.5rem;
  }
}