/* =========================================================
   ROWA/ROWASOL Sticky Header Switch – CSS (clean version)
   ========================================================= */

/* Admin-Bar Offset (wird optional per JS gesetzt, falls du willst) */
:root {
  --rowa-admin-offset: 0px;
}

/* Helper: falls dein JS das noch nutzt */
.rowa-hidden {
  display: none !important;
}

/* ---------------------------------------------------------
   ZEILE B (Small Header): initial hidden, becomes fixed on scroll
   - No display:none to avoid flicker / layout thrash
   - Fixed avoids Divi "sticky-container" issues (overflow/transform parents)
   --------------------------------------------------------- */

/* Base state: exists, but invisible and non-interactive */
.et_pb_row.zeile-b {
  position: relative; /* neutral until activated */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 99999;
  width: 100%;
}

/* Active state: pinned to top */
.et_pb_row.zeile-b.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  position: fixed;
  top: var(--rowa-admin-offset);
  left: 0;
  right: 0;
}

/* ---------------------------------------------------------
   Optional: ensure the header bar spans full width cleanly
   (Divi sometimes sets max-width on rows depending on layout)
   --------------------------------------------------------- */
.et_pb_row.zeile-b.visible {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------------------------------------------------------
   Safari/Firefox logo shrink fix on smaller viewports
   --------------------------------------------------------- */
@media (max-width: 1100px) {
  /* Flex children must be allowed to shrink in Safari/FF */
  .zeile-a .et_pb_menu__wrap,
  .zeile-b .et_pb_menu__wrap,
  .zeile-a.et_pb_row,
  .zeile-b.et_pb_row {
    min-width: 0 !important;
  }

  .zeile-a .et_pb_menu__logo-wrap,
  .zeile-b .et_pb_menu__logo-wrap {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  .zeile-a .et_pb_menu__logo,
  .zeile-b .et_pb_menu__logo {
    overflow: visible !important;
  }

  .zeile-a .et_pb_menu__logo img,
  .zeile-b .et_pb_menu__logo img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block !important;
  }
}