/* 09_responsive.css — Media-Queries. Phase 2: aus v7 Z. 1213-1216 + 1463-1616.
   Bricht Menü-Leiste auf <768px auf Hamburger, skaliert Karussell und
   passt Tablett/Abschnitt/Footer für Mobile an. */

/* Kacheln werden auf Mobile einspaltig */
@media (max-width: 600px) {
  .kacheln-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem 0;
  }
}

/* V7.18: Responsive Hamburger-Menü auch auf Desktop bei schmalem Viewport */
@media (max-width: 768px) {
  /* iOS-Momentum-Scrolling (background-attachment ist jetzt global scroll → 01_reset.css) */
  body {
    -webkit-overflow-scrolling: touch;
  }

  .hamburger {
    display: block;
    position: fixed;
    right: 15px;
    top: 60px;
  }

  .menu-container {
    position: relative;
  }

  .menu-leiste {
    display: none;
    flex-direction: column;
    width: 250px;
    position: fixed;
    top: 115px;
    right: 15px;
    left: auto;
    background: var(--farbe2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    z-index: 100;
  }

  .menu-leiste.active {
    display: flex;
  }

  .menu-leiste>li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .menu-leiste>li:last-child {
    border-bottom: none;
  }

  .menu-leiste>li>a {
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
  }

  .submenu {
    position: static;
    display: none;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.1);
  }

  .menu-leiste>li.submenu-open>.submenu {
    display: block;
  }

  /* V7.22: Karussell responsive — skaliert proportional */
  .karussell-container {
    max-width: 100vw;
    height: auto !important;
    aspect-ratio: var(--canvas-ratio);
  }
  .karussell-slide {
    transform-origin: top left;
  }
  .karussell-slide img {
    width: 100%;
    height: auto;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  /* TextBox + Logo mitskalieren */
  .karussell-slide .textBox,
  .karussell-slide .sl-logo {
    transform-origin: top left;
  }
  /* Logo im Karussell: wird durch scaleKarussell() mitskaliert.
     Schützt vor generischer .karussell-slide img Regel (width:100% blies Logo auf volle Slide-Breite auf) */
  .karussell-slide .sl-logo {
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    object-fit: none !important;
  }

  /* V7.22: Abstand Karussell → Tablett reduzieren */
  .tablett {
    margin-top: 0;
    margin-bottom: 10px;
    padding: 0.5rem 0.8rem 1rem 0.8rem;
  }
  .tablett-title {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    padding-top: 0.3rem;
  }

  /* V7.22: Abschnitt volle Breite auf Mobile, weniger Leerraum */
  .abschnitt {
    max-width: 100%;
    margin: 0.5rem auto;
  }
  /* Bug 5: Video/Audio nicht über Bildschirmrand */
  .abschnitt video,
  .abschnitt audio {
    max-width: 100% !important;
  }

  /* V7.22: Footer responsive — nicht rechts abgeschnitten */
  .footer {
    padding: 0.5rem 0.8rem;
    box-sizing: border-box;
    width: 100%;
    left: 0;
    right: 0;
  }
  .footer-content {
    flex-direction: column;
    gap: 0.5rem;
  }
  .footer-right {
    text-align: left;
  }
  .footer-social {
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 0.5rem;
    font-size: 1rem;
  }
  .footer-social a {
    font-size: 1rem;
  }
  .footer-bottom-bar {
    /* Mobile: 3-Zellen-Grid auf 1 Spalte stacken (2026-05-26).
       flex-direction column reicht nicht mehr — Grid muss explizit umgeschaltet werden. */
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }
  .footer-legal-links,
  .footer-copyright,
  .footer-credit-area {
    justify-self: start;
  }
  .footer-impressum {
    max-width: 100%;
  }
  .footer-impressum td:first-child {
    white-space: normal;
  }
  .footer-impressum table {
    width: 100%;
    font-size: 0.8rem;
  }

  /* V7.22: Impressum/Datenschutz scrollbar + touch-fähig */
  .footer-datenschutz,
  .footer-impressum details {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .footer-datenschutz {
    padding: 0 0.5rem;
    max-width: 100%;
  }
}