/* =====================================================
   Responsive Styles – Mobile/Tablet
   Breakpoint: max-width 1000px
   Hinweis: Regeln/Values/Funktionalität unverändert –
   nur aufgeräumt + kommentiert.
   ===================================================== */

@media (max-width: 1000px) {

  /* =====================================================
     1) Navigation / Header (Mobile Menü)
     ===================================================== */

  .nav-wrapper {
    position: fixed;
    inset: 0;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin: auto;
    border-radius: 0px;
    transform: translateY(-120%);
    transition: transform 0.3s ease;
    z-index: 1000;
    background-color: var(--primary-color);
  }

  /* Menü geöffnet (Klasse via JS/Interaktion) */
  .nav-wrapper.open {
    transform: translateX(0);
  }

  /* Hauptmenü vertikal */
  .main-menu {
    flex-direction: column;
    gap: 12px;
    padding: 0px;
    text-align: center;
    font-size: 22px;
    line-height: 32px;
  }

  .main-menu a {
    text-decoration: none;
    color: white;
  }

  /* Header Layout: Branding links, Burger rechts */
  .header-inner {
    justify-content: space-between;
    width: 90%;
  }

  /* Burger Button sichtbar machen */
  .menu-toggle {
    display: block;
  }

  /* Burger Linien: Standard + Active State */
  .menu-toggle .line {
    background: var(--primary-color);
  }

  .menu-toggle.active .line {
    background: var(--accent-color);
  }

  /* Header-Buttons im Mobile Menü ausblenden */
  .header-buttons {
    display: none;
  }


  /* =====================================================
     2) Navigation Suche (Mobile)
     ===================================================== */

  .site-nav-search .wp-block-search__button {
    background-color: var(--secondary-color);
  }

  /* Suche volle Breite + Positionierung */
  .site-nav-search {
    display: flex;
    justify-content: center;
    margin-top: -100px;
  }

  .site-nav-search .wp-block-search {
    width: 100%;
  }

  /* Input im Mobile-Menü immer sichtbar */
  .nav-wrapper .wp-block-search__inside-wrapper .wp-block-search__input {
    opacity: 1;
  }


  /* =====================================================
     3) News-Leiste
     ===================================================== */

  .site-news {
    width: 100%;
    top: 100px;
    padding: 10px 0px;
  }


  /* =====================================================
     4) Form / Labels
     ===================================================== */

  .prbn-form-label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 80%;
    align-items: baseline;
    justify-content: center;
    margin: auto;
  }

  .prbn-form-actions {
    justify-content: center;
    margin-top: 30px;
  }


  /* =====================================================
     5) Sections / Layout Stacks (Mobile)
     ===================================================== */

  .section-design-hero .inhalt-wrapper {
    flex-flow: column;
  }

  .section-design-hero .prbn-post-slider,
  .section-design-hero .prbn-single-image {
    width: 80%;
    margin-top: 60px;
    max-width: 400px;
  }

  .section-design-switch .inhalt-wrapper {
    flex-flow: column;
  }

  .headline-wrapper {
    justify-content: center;
  }

  /* Textbereich kompakter & zentriert */
  .content-text-wrapper {
    padding: 0px;
    text-align: center;
    display: flex;
    flex-flow: column;
    margin: 50px auto;
    max-width: 450px;
  }

  /* Wrapper stapelt */
  .inhalt-wrapper {
    flex-flow: column;
    width: 100%;
  }

  /* Bild/Slider: volle Breite, kein fixiertes Height */
  .prbn-single-image,
  .prbn-post-slider {
    width: 100%;
    height: 100%;
    max-width: 500px;
  }

  .content-section {
    width: 100%;
  }

  /* Doppelte Definition aus Original beibehalten */
  .inhalt-wrapper {
    flex-flow: column;
    justify-content: center;
  }


  /* =====================================================
     6) Kontaktdaten / Öffnungszeiten
     ===================================================== */

  .prbn-kontaktdaten--header {
    display: none;
  }

  .prbn-oeffzeiten__row {
    width: 100%;
    display: flex;
    flex-flow: column;
    gap: 5px;
    margin: 10px;
    justify-content: center;
    align-items: center;
  }

  .prbn-oeffzeiten__time {
    text-align: center;
  }

  .kontakt-site-wrapper {
    min-width: unset;
  }

  .prbn-kontaktdaten {
    justify-content: center;
    align-items: center;
  }

   .page .prbn-kontaktdaten {
    justify-content: center;
    align-items: center;
  }


  #site-footer .prbn-kontaktdaten {
  align-items: center;
}


  /* =====================================================
     7) Back-to-Top Button
     ===================================================== */

  .btt #back-to-top {
    right: 20px;
  }

  .btt #back-to-top.show {
    top: 88%;
  }


  /* =====================================================
     8) Produkte / Slider / Banner
     ===================================================== */

  .prbn-products-track {
    margin-left: 0px;
  }

  .prbn-products-orderitem {
    flex-flow: row;
  }

  .section-design-hero .section-wrapper {
    height: 100%;
  }

  /* (zweite Definition aus Original beibehalten) */
  .content-text-wrapper {
    max-width: 500px;
  }

  .section-design-hero .content-image--featured {
    height: 110%;
  }

  .content-text-wrapper p {
    max-width: 450px;
    margin: 10px auto;
    padding: 10px 20px;
  }

  /* Banner: Slider Navigation ausblenden */
  .section-design-banner .img-slider-navigation {
    display: none;
  }


  /* =====================================================
     9) Search Results
     ===================================================== */

  .search-results-list {
    width: 95%;
  }

  .search-results-thumb {
    width: 150px;
    height: 150px;
  }

  .search-results-item {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .search-results-content {
    text-align: center;
  }

  .search-results-item .wp-block-buttons {
    width: unset;
  }


  /* =====================================================
     10) Submenu / Dropdown Verhalten (Mobile)
     ===================================================== */

  .sub-menu {
    margin-left: 4px;
  }

  .menu-item-has-children .sub-menu {
    opacity: 0.5;
    transition: 0.2s ease all;
    background-color: #fff0;
  }


  /* =====================================================
     11) Background Images (Mobile Positionierung)
     ===================================================== */

  .background-image-1 {
    left: -60%;
  }

  .background-image-2 {
    right: -410px;
  }


  /* =====================================================
     12) Footer
     ===================================================== */

.footer-inner {
  flex-flow: column;
}


.footer-section-1, .footer-section-2, .footer-section-3, .footer-section-4 {
  width: 100%;
  padding: 10px 0px;
    align-items: center;
}

#site-footer .prbn-kontaktdaten {

  padding: 0px;
}

.footer-menu {
flex-flow: column;
}



.kontakt-site-wrapper {
  width: 100%;
}

.kontakt-site-wrapper h2{
  text-align:center;
}


.page .prbn-kontaktdaten {
  align-items: center;
}




}