/* Header-Kontaktblock (#logor): Telefon, Status, Oeffnungszeiten - neues Design 2026-10-12
   Praefix :not(.zN) erhoeht die Spezifitaet gegenueber catalog-shared-shell.css / catalog-reference.css. */
html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #header #logor {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 8px !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: right !important;
}

html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px 10px !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Telefon als Button */
html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .tel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font: 700 0/1 Arial, Helvetica, sans-serif !important;
  white-space: nowrap !important;
}

html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .tel::before {
  content: "\f095" !important;
  position: static !important;
  display: grid !important;
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #fff1e8 !important;
  color: #bd4312 !important;
  font: normal 16px/1 FontAwesome !important;
}

html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .tel a {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #1b2b35 !important;
  font: 700 17px/1.1 Arial, Helvetica, sans-serif !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .tel a:hover { color: #bd4312 !important; }

/* Status-Chip */
html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border: 1px solid #f0cfd0 !important;
  border-radius: 999px !important;
  background: #fdeeee !important;
  color: #a12a2f !important;
  font: 700 13px/1 Arial, Helvetica, sans-serif !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: currentColor !important;
}

html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status.open {
  border-color: #bfe3c9 !important;
  background: #eaf7ee !important;
  color: #1f7a3a !important;
}

html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status.pause {
  border-color: #f1dca6 !important;
  background: #fff5db !important;
  color: #8a5a00 !important;
}

/* Oeffnungszeiten */
html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-list {
  display: grid !important;
  grid-template-columns: repeat(2, auto) !important;
  gap: 3px 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-list li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #4a565d !important;
  font: 400 12px/1.4 Arial, Helvetica, sans-serif !important;
  text-align: left !important;
  white-space: normal !important;
}

html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-list li b {
  display: block !important;
  color: #1b2b35 !important;
  font-weight: 700 !important;
}

/* Handy / Tablet: einzeilige Leiste wie im Mockup, Oeffnungszeiten ausklappbar */
@media (max-width: 900px) {
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #header #logor {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: 100% !important;
    padding: 8px 12px !important;
    border: 0 !important;
    border-bottom: 1px solid #efe4da !important;
    border-radius: 0 !important;
    background: #fbf6f1 !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status-wrapper {
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .tel { gap: 5px !important; padding: 4px 9px 4px 6px !important; border: 1px solid #f0d9c8 !important; border-radius: 999px !important; background: #fdeee2 !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .tel::before { width: 16px !important; height: 16px !important; background: transparent !important; font-size: 13px !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .tel a { font-size: 11px !important; font-weight: 600 !important; white-space: nowrap !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status { padding: 5px 9px !important; font-size: 11px !important; gap: 5px !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-toggle {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    padding-left: 0 !important;
    background: transparent !important;
    color: #1b2b35 !important;
    font: 500 11px/1.1 Arial, Helvetica, sans-serif !important;
    cursor: pointer !important;
  }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-toggle::before-removed {
    content: "\f017" !important;
    display: grid !important;
    place-items: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    background: #fff1e8 !important;
    color: #bd4312 !important;
    font: normal 13px/1 FontAwesome !important;
  }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-toggle::after {
    content: "\f105" !important;
    font: normal 15px/1 FontAwesome !important;
    transition: transform .2s !important;
  }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor.is-hours-open .logor-hours-toggle::after { transform: rotate(90deg) !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours {
    display: none !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid #efe4da !important;
  }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor.is-hours-open .logor-hours { display: block !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-list { grid-template-columns: 1fr !important; gap: 8px !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-list li {
    display: grid !important;
    grid-template-columns: minmax(96px, 36%) 1fr !important;
    gap: 2px 12px !important;
    justify-content: start !important;
    text-align: left !important;
    font-size: 13.5px !important;
  }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-list li b { display: block !important; text-align: left !important; }
}

/* Kopfleiste mobil: helles Logo */
html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #menu-wrapper #menu .menu-collapser__brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 auto !important;
  width: auto !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #menu-wrapper #menu .menu-collapser__brand img {
  display: block !important;
  width: auto !important;
  height: 38px !important;
  max-width: 100% !important;
  margin: 0 !important;
}

/* Grosses Logo im Seitenkopf mobil ausblenden: Marke sitzt in der Kopfleiste */
@media (max-width: 900px) {
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #header #logo { display: none !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #header #logor .status-wrapper { width: auto !important; flex: 1 1 0 !important; }
}

/* Toggle nur mobil sichtbar */
@media (min-width: 901px) {
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-toggle { display: none !important; }
}

@media (max-width: 900px) {
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #header #logor { flex-wrap: wrap !important; gap: 0 8px !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status-wrapper { flex: 1 1 auto !important; flex-wrap: nowrap !important; min-width: 0 !important; gap: 6px !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .tel { flex: 0 0 auto !important; width: auto !important; max-width: none !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status { flex: 0 0 auto !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-toggle { flex: 0 0 auto !important; white-space: nowrap !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours { order: 5 !important; }
}

@media (max-width: 900px) {
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status-wrapper { flex-direction: row !important; align-items: center !important; flex-wrap: nowrap !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .tel { flex-wrap: nowrap !important; justify-content: flex-start !important; padding: 3px 8px 3px 5px !important; gap: 4px !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .tel::before { padding: 0 !important; width: 14px !important; height: 14px !important; font-size: 12px !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .tel a { font-size: 10.5px !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status { padding: 4px 7px !important; font-size: 10.5px !important; gap: 4px !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-toggle { font-size: 10.5px !important; margin-left: 2px !important; gap: 3px !important; }
}

@media (max-width: 900px) {
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .status { min-height: 0 !important; height: auto !important; line-height: 1.2 !important; }
}

@media (max-width: 900px) {
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-list { justify-items: stretch !important; width: 100% !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #logor .logor-hours-list li { width: 100% !important; justify-self: stretch !important; }
}

/* Kopfbereich vollflaechig (ohne Kasten/Rand), wie im Mockup */
@media (max-width: 900px) {
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #header-wrapper { padding: 0 !important; background: #fbf6f1 !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #header-wrapper #header { padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #header #logor { border-bottom: 1px solid #efe4da !important; }
}

@media (max-width: 900px) {
  html body.bi-modern-ui:not(.z1):not(.z2):not(.z3):not(.z4) #menu-wrapper #menu .menu-collapser__brand img { height: 34px !important; }
}