/* =================================================================================
                                    TABLET (768px)
  ================================================================================== */
@media (min-width: 768px){
  /* =========================
   GLOBAL SETTINGS
   ========================= */
  body {
      font-size: 18px; 
  }
  

  /* =========================
   HEADER
   ========================= */
  /* Mobile menu button (hidden on desktop) */
  .menu-toggle {
    /* Visibility */
    display: none;
  }

  .menu {
    /* Positioning */
    position: static;

    /* Visibility & Interaction (active state) */
    opacity: 1;
    transform: none;
    pointer-events: auto;

    /* Layout */
    display: flex;
    align-items: center;

    /* Dimensions */
    width: auto;

    /* Visual Reset */
    border: none;
  }

  .menu-list {
    /* Layout */
    display: flex;
    flex-direction: row;

    /* Spacing */
    gap: 34px; 
  }

  .menu-item, .submenu-item {
    /* Positioning */
    position: relative;

    /* Reset default spacing */
    padding: 0;
    margin: 0;
  }

  /* Submenu closed */
  .submenu-list {
    /* Closed state (hidden dropdown with animation offset) */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);

    /* Positioning */
    position: absolute;
    top: 100%;
    left: 0;

    /* Layout (dropdown structure) */
    flex-direction: column;
    min-width: 160px;

    /* Layering */
    z-index: 100;

     /* Visual Styling */
    background: linear-gradient(to bottom, #513C37 0%, #422E2A 100%);
    border-radius: 4px;

      /* Animation */
    transition: max-height 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
  }

  /* Open state (expanded dropdown) */
  .submenu-list.is-open {
    /* Visibility */
    opacity: 1;
    
    /* Dimensions */
    max-height: 500px;
    
    /* Animation */
    transform: translateY(0);
  }

  .submenu-link {
    /* Typography */
    color: #EDD9B4;
    text-align: left;
  }


  /* =========================
   MAIN
   ========================= */
  #hero {
    aspect-ratio: auto;
    height: 100vh;
  }

  /* SECTION GALLERY */
  .gallery-heading h2{
    font-size: 32px;
  }

  .gallery-image-box{
    aspect-ratio: 16 / 10;
  }

  .gallery-image-box img{
    object-fit: cover;
  }

  .gallery-title{
    font-size: 20px;
  }

  .gallery-description{
    font-size: 15px;
  }
  
  /* SECTION PRICES */
  .pricing-package,
  .package-highlight,
  .package-service,
  .included-service,
  .package-total,
  .package-summary {
    padding: 10px; /* etwas mehr Platz auf Tablet */
  }

  /* SECTION CONSULTATION */
  .consultation-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center; 
  }

  /* 1 links, 2 rechts */
  .consultation-image-box { 
    grid-column: 1; 
  }
  .consultation-inputfield-box { 
    grid-column: 2; 
  }

  /* 3 und 4 zentriert darunter */
  .consultation-text-box { 
    grid-column: 1 / span 2; 
  }
  .consultation-btn-box  { 
    grid-column: 1 / span 2; 
  }
  
   
  /* =========================
  FOOTER
  ========================= */
  .site-footer {
    /* Layout */
    gap: 0;

    /* Spacing */
    padding-top: 60px;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-main {
    /* Layout */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    /* Spacing */
    gap: 0;
  }

  .footer-policy {
    /* Spacing */
    padding: 0;
    margin: 20px 0 0 0;
  }

  .footer-logo {
    /* Layout */
    flex-shrink: 0;
  }

  .footer-logo img {
    /* Dimensions */
    max-height: 100px;
  }

  .footer-content {
    /* Layout */
    display: flex;
    flex-direction: row;
    flex: 1;
    justify-content: center;
    align-items: flex-start;

    /* Spacing */
    gap: 40px;
  }

  .footer-copyright {
    /* Typography */
    font-size: 13px;
  }
}



/* =================================================================================
                                    DESKTOP (1024px)
  ================================================================================== */
@media (min-width: 1024px){
  /* =========================
   GLOBAL SETTINGS
   ========================= */
  body {
      font-size: 20px; 
  }

  /* =========================
   HEADER
   ========================= */
  /* Same as tablet header (768px+) */
  /* =========================
   HEADER
   ========================= */


  /* =========================
   MAIN
   ========================= */
   /* SECTION GALLERY */
  .gallery-heading h2{
    font-size: 36px;
  }
  .gallery-image-box{
    aspect-ratio: 16 / 9;
  }

  .gallery-image-box img{
    object-fit: cover;
  }

  .gallery-title{
    font-size: 22px;
  }

  .gallery-description{
    font-size: 16px;
  }

  /* SECTION PRICES */
  .pricing-package,
  .package-highlight,
  .package-service,
  .included-service,
  .package-total,
  .package-summary {
    padding: 14px; /* großzügiger Abstand auf Desktop */
  }


  /* =========================
  FOOTER
  ========================= */
  .site-footer {
    /* Layout */
    gap: 0;

    /* Spacing */
    padding-top: 60px;
    padding-bottom: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-main {
    /* Layout */
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    /* Spacing */
    gap: 0;
  }

  .footer-policy {
    /* Spacing */
    padding: 0;
    margin: 40px 0 0 0;
  }

  .footer-logo {
    /* Layout */
    flex-shrink: 0;
  }

  .footer-logo img {
    /* Dimensions */
    max-height: 100px;
  }

  .footer-content {
    /* Layout */
    flex-direction: row;
    flex: 1;
    justify-content: center;
    align-items: flex-start;

    /* Spacing */
    gap: 120px;
  }

  .footer-copyright {
    /* Typography */
    font-size: 14px;
  }
}