/* 
 * MeinVerwalter
 * Responsive Stylesheet
 */

/* Large Devices (Desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  .container {
    max-width: 960px;
  }
}

/* Medium Devices (Tablets, less than 992px) */
@media (max-width: 991.98px) {
  .container {
    max-width: 720px;
  }
  
  .columns-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .hero h1 {
    font-size: 1.9rem;
  }
  
  .hero p {
    font-size: 0.9rem;
  }
  
  /* Pricing Cards speziell für Tablets */
  .columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small Devices (Landscape Phones, less than 768px) */
@media (max-width: 767.98px) {
  html {
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100vw;
  }
  
  body {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: auto;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    height: auto;
    position: relative;
    width: 100%;
  }
  
  main, section, div {
    max-width: 100%;
  }
  
  .container {
    max-width: 540px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
  }
  
  img, svg, video, iframe, table {
    max-width: 100%;
  }
  
  .columns-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .columns-2 {
    grid-template-columns: 1fr;
  }
  
  .hero-buttons {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .hero-buttons .btn {
    width: 100%;
  }
  
  /* Side Menu Adjustments */
  .side-menu {
    width: 280px; /* Etwas schmaler auf Mobilgeräten */
  }
  
  /* Header Adjustments */
  header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    width: 100%;
  }
  
  .header-content {
    padding: 10px 0;
  }
  
  /* Footer */
  .footer-content {
    flex-direction: column;
  }
  
  .footer-section {
    width: 100%;
  }
  
  /* Cookie Consent */
  .cookie-consent {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .cookie-text {
    margin-bottom: var(--spacing-md);
    margin-right: 0;
  }
  
  .cookie-buttons {
    width: 100%;
  }
  
  .cookie-buttons .btn {
    flex: 1;
  }
}

/* Extra Small Devices (Portrait Phones, less than 576px) */
@media (max-width: 575.98px) {
  .container {
    width: 100%;
    padding: 0 var(--spacing-md);
  }
  
  .columns-4,
  .columns-3 {
    grid-template-columns: 1fr;
  }
  
  .section {
    padding: var(--spacing-xl) 0;
    overflow-x: hidden;
  }
  
  h1 {
    font-size: 1.6rem !important;
  }
  
  h2 {
    font-size: 1.3rem !important;
  }
  
  h3 {
    font-size: 1.1rem !important;
  }
  
  .hero h1 {
    font-size: 1.4rem;
  }
  
  /* Header Anpassungen */
  .header-content {
    padding: 8px 0;
  }
  
  .logo img {
    width: 40px;
  }
  
  /* Pricing */
  .mobile-scroll-hint {
    display: block;
  }
  
  .table-scroll-container {
    margin: 0 -20px;
    width: calc(100% + 40px);
    padding: 0 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .pricing-table {
    display: block;
    width: 100%;
    max-width: 100%;
  }
  
  /* Forms */
  .form-group {
    margin-bottom: var(--spacing-md);
  }
  
  /* Side Menu kleiner */
  .side-menu {
    width: 260px;
  }
}